So debuggen Sie Web-Worker

Ich habe mit Web-Workern in HTML 5 gearbeitet und suche nach Möglichkeiten, sie zu debuggen. Idealerweise so etwas wie Firebug- oder Chrome-Debugger. Hat jemand eine gute Lösung dafür. Ohne Zugriff auf die Konsole oder das DOM ist es schwierig, zweifelhaften Code zu debuggen

Als schnelle Lösung für das fehlende console.log können Sie einfach verwenden throw JSON.stringify({data:data})

Die Dev Channel-Version von Chrome unterstützt das Debuggen von Workern, indem eine Implementierung für gefälschte Worker eingefügt wird, die Worker mithilfe eines Iframes auf der Client-Seite des Workers simuliert. Sie müssen zum Bereich "Skripte" navigieren und das Kontrollkästchen "Debuggen" in der Workers-Seitenleiste rechts aktivieren und dann die Seite neu laden. Das Arbeitsskript wird dann in der Liste der Seitenskripte angezeigt. Diese Simulation weist jedoch bestimmte Einschränkungen auf - da das Worker-Skript im Client-Seitenthread ausgeführt wird, wird die Benutzeroberfläche des Browsers durch alle lang laufenden Vorgänge im Worker eingefroren.

Der WebWorker kann wie eine normale Webseite debuggt werden. Chrome bietet Debugging-Entwicklungstools für WebWorker unter: chrome : // inspect / # worker

Suchen Sie den gewünschten laufenden Webworker und klicken Sie auf "Inspizieren". Ein separates Dev-Tool-Fenster für diesen Webworker wird geöffnet. Die offiziellen Anweisungen sind eine Überprüfung wert.

Ab Chrome 65 können Sie jetzt einfach die "Step-In" -Funktion des Debuggers verwenden:

Weitere Einzelheiten finden Sie in der Versionshinweis .

Scrollen Sie im Chrome-Debugger auf der Registerkarte "Skript" zum Worker-Bereich und wählen Sie "Pause beim Start". Dadurch können Sie einen Worker debuggen und Haltepunkte einfügen. Dies alles tun Sie jedoch in einem anderen Fenster

Wie in Chrome v35

• Laden Sie Ihre Seite und öffnen Sie die Chrome Developer Tools.
  
  
• Navigieren Sie zur Registerkarte Quellen .
  
  

• Überprüfen Sie Pause von Start - Check-Box, wie unten dargestellt:
  
  

• Laden Sie die Seite neu, der Debugger wird im Web Worker angehalten, allerdings in einem neuen Fenster!

Bearbeiten: In neueren Versionen von Chrome (ich verwende Version 39) befinden sich die Worker unter der Registerkarte "Threads", anstatt über eine eigene Registerkarte "Workers" zu verfügen (die Registerkarte "Threads" wird angezeigt, wenn Worker ausgeführt werden).

Sie können verwenden self.console.log('your debugging message')

Die akzeptierte Antwort ist nicht wirklich eine Lösung für alle.

In diesem Fall können Sie console.logoder console.debugoder console.errorin Web Workers in Firefox verwenden. Siehe Bug # 620935 und Bug # 1058644 .

und Wenn Sie sich in Chrome befinden, können Sie Web-Worker genauso debuggen wie normale Skripte. Wenn Sie dies tun, wird die Datei console.log auf Ihrer Registerkarte gedruckt. Falls es sich bei Ihrem Mitarbeiter jedoch um einen gemeinsamen Mitarbeiter handelt, sollten Sie einen Blick darauf werfen chrome://inspect.

Zusätzlicher Tipp: Da es für Javascript-Neulinge ziemlich schwierig ist, Worker zu erlernen, habe ich für sie einen extrem leichten Wrapper geschrieben, der Ihnen eine konsistente API für beide Arten von Workern bietet. Es heißt Worker-Exchange .

Im Februar 2016 veröffentlichte WebStorm die Unterstützung für das Debuggen von Web-Workern .

Der WebStorm JavaScript-Debugger kann jetzt Haltepunkte in diesen Hintergrundarbeitern erreichen. Sie können die Frames wie gewohnt durchsuchen und Variablen untersuchen. In der Dropdown-Liste links können Sie zwischen den Worker-Threads und dem Hauptanwendungsthread springen.

Eine einfache Lösung, um zu Debugging-Zwecken Zugriff auf Nachrichten / Daten eines Workers zu erhalten, besteht darin, die postMessage()gewünschten Debugging-Informationen innerhalb Ihres Worker-Threads zurückzugeben.

Diese Nachrichten können dann in Ihrem übergeordneten Prozess "abgefangen" werden. onmessage Handler , der beispielsweise die vom Worker an die Konsole zurückgegebenen Nachrichten / Daten protokollieren kann. Dies hat den Vorteil, dass es sich um einen nicht blockierenden Ansatz handelt, und ermöglicht es, dass Arbeitsprozesse als echte Threads ausgeführt und in der üblichen Browserumgebung debuggt werden. Während eine solche Lösung keine Überprüfung des Arbeitsprozesscodes auf Haltepunktebene ermöglicht, bietet sie in vielen Situationen die Möglichkeit, so viele oder so wenig Daten wie nötig aus einem Arbeitsprozess heraus verfügbar zu machen, um das Debuggen zu erleichtern.

Eine einfache Implementierung kann wie folgt aussehen (relevante Auszüge gezeigt):

// Irgendwo im onmessageFunktionsumfang des Workers (so oft wie nötig verwenden):

postMessage({debug:{message:"This is a debug message"}});

// Im onmessageHandler des Elternteils :

myWorker.onmessage = function(event) {
   if(event.data && event.data.debug) {
      // handle debug message processing here...
      if(event.data.debug.message) {
         console.log("message from worker: %o", event.data.debug.message);
      }
   } else {
      // handle regular message processing here...
   }
};

Neben JSON.stringify () gibt es auch port.postMessage( (new Object({o: object})) ). Vielleicht ist es JSON.stringifyhilfreicher , es zusammen mit zu verwenden.

Hoffe das war hilfreich!

Bei neuen Versionen von Google Chrome gehen Sie einfach zu Deveverloper Tools> Sources(oder klicken Sie mit der rechten Maustaste auf das Menü Inspect>> Sources).

Am unteren Rand der PageListe des linken Bedienfelds sehen Sie die Servicemitarbeiter in einem Engine-Symbol.