it-swarm.com.de

So debuggen Sie Web Worker

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

53
Zachary K

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

21
daralthus

Die Chrome-Version von Chrome unterstützt das Debugging von Arbeitern, indem die Implementierung von gefälschten Arbeitern eingespielt wird, bei der die Mitarbeiter mithilfe eines iframe auf der Kundenseite des Arbeiters simuliert werden. Sie müssen zum Fensterbereich "Skripts" navigieren und in der Workers-Seitenleiste auf der rechten Seite das Kontrollkästchen "Debuggen" aktivieren, um die Seite neu zu laden. Das Arbeiterskript erscheint dann in der Liste der Seitenskripts. Diese Simulation hat jedoch einige Einschränkungen: Da das Arbeiterskript im Clientseitenthread ausgeführt wird, frieren alle länger andauernden Vorgänge in Worker die Browser-Benutzeroberfläche ein.

54
caseq

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

Suchen Sie den gewünschten laufenden Webworker und klicken Sie auf "inspect". Es öffnet sich ein separates Dev-Tool-Fenster für diesen Webworker. Die offiziellen [Anweisungen] [2] sind eine Überprüfung wert.

15
user2519809

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

11
zeacuss

Wie in Chrome v35

  • Laden Sie Ihre Seite und öffnen Sie die Chrome Developer Tools.

  • Navigieren Sie zur Registerkarte Sources.

  • Aktivieren Sie das Kontrollkästchen Pause von Start wie unten gezeigt:

    Debugging workers in Chrome Dev Tools

  • 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 v39) befinden sich die Arbeiter unter einer Registerkarte "Threads" und nicht über eine eigene Registerkarte "Workers" (Die Registerkarte Threads wird sichtbar, wenn gerade Arbeiter ausgeführt werden).

10
Ashwin Aggarwal

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

 enter image description here

Weitere Informationen finden Sie in der Versionshinweise .

9
Philipp Claßen

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

3
Harshit Jain

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

In diesem Fall können Sie console.log oder console.debug oder console.error in Web Workers in Firefox verwenden. Siehe Fehler # 620935 und Fehler # 1058644 .

wenn Sie sich in Chrome befinden, können Sie Web-Worker genauso wie normale Skripts debuggen. Wenn Sie dies tun, wird das console.log auf Ihre Registerkarte gedruckt. Falls es sich bei Ihrem Mitarbeiter jedoch um einen freigegebenen Mitarbeiter handelt, möchten Sie vielleicht chrome://inspect überprüfen.

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

1
Steel Brain

Eine einfache Lösung für den Zugriff auf Nachrichten/Daten von einem Worker zu Debugging-Zwecken ist die Verwendung von postMessage() in Ihrem Worker-Thread, um die gewünschten Debugging-Informationen zurückzugeben.

Diese Nachrichten können dann in Ihrem übergeordneten Prozess "onmessage" -Handler "abgefangen" werden, der beispielsweise die Nachrichten/Daten protokolliert, die vom Worker an die Konsole zurückgegeben werden. Dies hat den Vorteil eines nicht blockierenden Ansatzes und ermöglicht, dass Arbeitsprozesse als echte Threads ausgeführt werden und in der üblichen Browserumgebung debuggt werden können. Während eine solche Lösung keine Überprüfung der Worker-Prozess-Codes auf Breakpoint-Ebene ermöglicht, bietet sie in vielen Situationen die Möglichkeit, innerhalb eines Worker-Prozesses so viele oder so wenige Daten wie erforderlich bereitzustellen, um das Debugging zu unterstützen.

Eine einfache Implementierung kann wie folgt aussehen (relevante Ausschnitte gezeigt):

// Irgendwo im Funktionsumfang der Arbeiterklasse onmessage (so oft wie nötig verwenden):

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

// Im onmessage-Handler des übergeordneten Elements:

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...
   }
};
0
bluebinary

Im Februar 2016 hat WebStorm Unterstützung für Debugging von Web Workern veröffentlicht.

Der WebStorm JavaScript-Debugger kann jetzt Haltepunkte in diesen Hintergrundarbeitern treffen. Sie können durch die Frames gehen und Variablen auf die gleiche Weise erkunden, wie Sie es gewohnt sind In der Dropdown-Liste links können Sie zwischen den Worker-Threads und dem Hauptanwendungsthread wechseln.

 WebStorm web worker debugging screenshot

0
Dan Dascalescu

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

Hoffe das war hilfreich!

0
Cody