Comment déboguer des employés Web
Je travaille avec des travailleurs Web en HTML 5 et je cherche des moyens de les déboguer. Idéalement, quelque chose comme les débogueurs firebug ou chrome. Quelqu'un at-il une bonne solution à cela? sans accès à la console ou DOM son genre de difficile à déboguer le code iffy
En tant que solution rapide sur le fichier console.log manquant, vous pouvez simplement utiliser throw JSON.stringify({data:data})
La version de Dev Channel de Chrome prend en charge le débogage des travailleurs en injectant une implémentation de faux travailleurs simulant les travailleurs à l'aide d'un iframe dans la page client de ce dernier. Vous devrez naviguer dans le volet Scripts et cocher la case Déboguer dans la barre latérale Ouvriers à droite, puis recharger la page. Le script de travail apparaîtra alors dans la liste des scripts de page. Cette simulation présente toutefois certaines limites: dans la mesure où le script de travail s'exécutant dans le fil de page du client, les opérations à exécution longue de ce dernier gèleront l'interface utilisateur du navigateur.
WebWorker peut être mis au point comme une page Web normale. Chrome fournit des outils de débogage pour WebWorkers sur chrome: // inspect/# workers .
Localisez le webworker souhaité et cliquez sur "inspecter". Une fenêtre séparée dev-tool s'ouvrira dédiée à ce webworker. Les [instructions] [2] officielles méritent d’être vérifiées.
dans le débogueur de chrome, dans l'onglet de script, faites défiler jusqu'au panneau de travail et sélectionnez Pause au démarrage. Cela vous permettra de déboguer un travailleur et d'insérer des points d'arrêt.
Comme dans Chrome v35
- Chargez votre page et ouvrez les outils de développement Chrome.
- Accédez à Sources tab.
Cochez Pause de départ case à cocher, comme indiqué ci-dessous:
![Debugging workers in Chrome Dev Tools]()
Rechargez la page, le débogueur se mettra en pause dans l’agent de traitement Web, mais dans une nouvelle fenêtre!
Modifier: dans les versions plus récentes de Chrome (j'utilise v39), les travailleurs sont placés dans un onglet "Threads" au lieu de disposer de leur propre onglet "Ouvriers" (l'onglet "Threads" devient visible s'il y a des travailleurs en cours d'exécution).
À partir de Chrome 65, vous pouvez désormais utiliser simplement la fonction "pas à pas" du débogueur:
Pour plus de détails, voir leur note de version .
La réponse acceptée n'est pas vraiment une solution pour tout le monde.
Dans ce cas, vous pouvez utiliser console.log ou console.debug ou console.error dans Web Workers dans Firefox. Voir Bogue n ° 620935 et Bogue n ° 1058644 .
et si vous êtes dans Chrome, vous pouvez déboguer des employés Web comme vous le feriez pour des scripts normaux. Le fichier console.log s’affichera sur votre onglet si vous le faites. Mais dans le cas où votre travailleur est partagé, vous voudrez peut-être consulter chrome://inspect.
Conseil supplémentaire: étant donné qu'il est assez difficile d'apprendre aux travailleurs débutants en javascript, j'ai écrit un wrapper extrêmement léger qui vous fournit une API cohérente pour les deux types de travailleurs. Cela s'appelle Worker-Exchange .
Une solution simple pour accéder aux messages/données d'un utilisateur à des fins de débogage consiste à utiliser postMessage() depuis votre thread de travail pour transmettre les informations de débogage souhaitées.
Ces messages peuvent ensuite être «interceptés» dans le gestionnaire onmessage de votre processus parent, ce qui pourrait, par exemple, consigner les messages/données retransmis par le travailleur à la console. Cela présente l'avantage d'être une approche non bloquante et permet aux processus de travail de s'exécuter en tant que threads réels et d'être débogués dans l'environnement de navigateur habituel. Une solution de ce type ne permet pas l’inspection du code de processus de travail au niveau du point de rupture, mais elle offre la possibilité d’exposer autant de données que nécessaire au sein d’un processus de travail afin de faciliter le débogage.
Une implémentation simple peut ressembler à ceci (extraits pertinents montrés):
// Quelque part dans la portée de la fonction onmessage du travailleur (à utiliser aussi souvent que nécessaire):
postMessage({debug:{message:"This is a debug message"}});
// Dans le gestionnaire onmessage du parent:
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...
}
};
En février 2016, WebStorm a publié le support pour le débogage de travailleurs Web .
Le débogueur JavaScript WebStorm peut désormais atteindre les points d'arrêt à l'intérieur de ces travailleurs en arrière-plan. Vous pouvez parcourir les cadres et explorer les variables de la même manière que vous en aviez l'habitude. Dans la liste déroulante sur la gauche, vous pouvez passer des threads des travailleurs au thread principal de l’application.
A côté de JSON.stringify (), il y a aussi port.postMessage( (new Object({o: object})) ). Peut-être que l’utiliser en tandem avec JSON.stringify sera plus utile.
J'espère que cela a été utile!