javascript - qué - web workers examples

Cómo depurar web workers

Question

He estado trabajando con web workers en HTML 5 y estoy buscando formas de depurarlos. Idealmente, algo así como los depuradores Firebug o Chrome. ¿Alguien tiene alguna buena solución para esto? sin acceso a la consola o DOM es difícil de depurar código dudoso

Answer 1

Además de JSON.stringify (), también hay port.postMessage( (new Object({o: object})) ) . Tal vez usarlo en conjunto con JSON.stringify será más útil.

Espero que esto haya sido útil.

Answer 2

Comenzando con Chrome 65, ahora puede simplemente usar la función "step-in" del depurador:

Para más detalles, mira su nota de lanzamiento .

Answer 3

Como en Chrome v35

• Cargue su página y abra las Herramientas de desarrollo de Chrome.
  
  
• Ve a la pestaña de Fuentes .
  
  

• Marque la casilla de verificación Pausa de inicio , como se muestra a continuación:
  
  

• Recargue la página, el depurador hará una pausa en el trabajador web, ¡aunque en una nueva ventana!

Editar: en las versiones más nuevas de Chrome (estoy usando v39), los trabajadores están en la pestaña "Subprocesos" en lugar de tener su propia pestaña "Trabajadores" (la pestaña Subprocesos se hará visible si hay trabajadores en ejecución).

Answer 4

Como una solución rápida en el console.log que falta, puedes simplemente usar throw JSON.stringify({data:data})

Answer 5

El WebWorker se puede depurar al igual que una página web normal. Chrome proporciona dep-herramientas de depuración para WebWorkers en chrome: // inspect / # workers .

Ubique al webworker en ejecución deseado y haga clic en "inspeccionar". Se abrirá una ventana de herramienta de desarrollo por separado dedicada a ese webworker. Las [instrucciones] oficiales [2] vale la pena verificar.

Answer 6

En febrero de 2016, WebStorm lanzó soporte para la depuración de trabajadores web .

El depurador JavaScript de WebStorm ahora puede llegar a puntos de interrupción dentro de estos trabajadores de segundo plano. Puede ir a través de los marcos y explorar las variables de la misma manera que está acostumbrado. En la lista desplegable de la izquierda puede saltar entre los hilos de los trabajadores y el hilo principal de la aplicación.

Answer 7

La respuesta aceptada no es realmente una solución para todos.

En ese caso, puede usar console.log o console.debug o console.error en Web Workers en Firefox. Ver Bug # 620935 y Bug # 1058644 .

y Si está en Chrome, puede depurar a los trabajadores web de la misma manera que depuraría los scripts normales, console.log se imprimirá en su pestaña si lo hace. Pero en caso de que su trabajador sea compartido, es posible que desee echarle un vistazo a chrome://inspect .

Consejo adicional: Debido a que los trabajadores son bastante difíciles de aprender para las personas que recién comienzan a javascript, les he escrito un envoltorio extremadamente liviano que les proporciona una API consistente para ambos tipos de trabajadores. Se llama Worker-Exchange .

Answer 8

La versión Dev Channel de Chrome admite la depuración de los trabajadores al inyectar la implementación de trabajadores falsos que simula a los trabajadores que usan un iframe dentro de la página del cliente del trabajador. Deberá navegar al panel de Scripts y marcar la casilla de verificación Depurar en la barra lateral de Trabajadores a la derecha, luego volver a cargar la página. El script de trabajador aparecerá en la lista de scripts de página. Sin embargo, esta simulación tiene ciertas limitaciones: dado que el script de trabajo se ejecutará en el hilo de la página del cliente, cualquier operación de larga ejecución en el trabajador congelará la IU del navegador.

Answer 9

Puede usar self.console.log(''your debugging message'')

Answer 10

Una solución simple para obtener acceso a mensajes / datos de un trabajador con fines de depuración es usar postMessage() desde dentro de su hilo de trabajo para devolver la información de depuración que desea.

Es posible que estos mensajes se "capturen" en el controlador onmessage su proceso onmessage , lo que podría, por ejemplo, registrar los mensajes / datos que el trabajador pasó a la consola. Esto tiene la ventaja de ser un enfoque no bloqueante y permite que los procesos de los trabajadores se ejecuten como hilos reales y se depuren en el entorno habitual del navegador. Si bien una solución como esta no permite la inspección a nivel de punto de interrupción del código de proceso del trabajador, para muchas situaciones, ofrece la capacidad de exponer tantos datos como sea necesario de un proceso de trabajo para ayudar en la depuración.

Una implementación simple puede parecerse a lo siguiente (se muestran extractos relevantes):

// En algún lugar del onmessage función onmessage del trabajador (use onmessage veces como sea necesario):

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

// En el controlador onmessage del padre:

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

Answer 11

en el depurador de Chrome, en la pestaña del script, desplácese hasta el panel de trabajo y seleccione pausa al inicio ... le permitirá depurar un trabajador e insertar puntos de interrupción ... pero puede hacer todo eso en una ventana diferente