Depurando Service Workers y Push con las herramientas de desarrollo de Firefox

30 junio, 2016 3:35 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Continuando con el anuncio de Web Push en Firefox 44, se está ahora lanzando la capacidad de desarrollar y depurar código de service workers y notificaciones push con las herramientas de desarrollo usando Firefox Developer Edition 47.

Aquí está un vídeo que muestra las características descritas en este artículo:

O si prefieres texto, ¡continúa leyendo!

about:debugging

Los service workers no se comportan exactamente como los web workers corrientes, y su ciclo de vida es diferente, así que no podemos mostrarles junto a los scripts normales en la pestaña de depuración de las herramientas de desarrollo.

En su lugar, hemos añadido un nuevo panel de control que recoge todos los service workers registrados y workers compartidos, entre otros elementos depurables tales como los complementos.

Por lo tanto, nuestra aventura de depuración comienza yendo hacia about:debugging en una pestaña nueva, y haciendo click en la pestaña Workers a la izquierda.

about:debugging

Alternativamente, puedes acceder al panel de control yendo al menú Herramientas ⇨ Desarrollador web ⇨ Service Workers, o haciendo click en la barra de menú, después Desarrollador, y finalmente Service Workers.

Menú service workers Menú barra de herramientas

Actualizaciones instantáneas

La primera vez que accedemos al panel, el mensaje “nothing yet” (“nada todavía”) es mostrado bajo las secciones Service Workers y Shared Workers. Estas secciones serán actualizadas automáticamente según los workers son registrados. Los botones mostrados cambiarán de manera acorde, mostrando Push y Debug si el worker está ejecutándose, o solo un botón de Start si el worker está registrado, pero inactivo.

¡Inténtalo! Abre about:debugging en una ventana, y navega a esta simple demostración de service worker en otra ventana. El service worker será registrado y mostrado bajo la sección service workers. ¡No necesitas volver a cargar el panel de control!

Depurando service workers

Para depurar un service worker, el worker debe estar en ejecución. Haciendo click en el botón Debug asociado, o Start el worker si este no está ejecutándose todavía (mientras haya sido registrado y así esté en el panel about:debugging).

Esto mostrará una nueva ventana emergente con el código del service worker. Aquí es donde puedes hacer toda la depuración habitual que se podría esperar: establecer puntos de ruptura, ejecutar paso a paso, inspeccionar variables, etc.

Popup depurador

Notificaciones push

El código que usa la API Web Push puede ahora ser depurado también, estableciendo un punto de ruptura en el listener para el evento push del service worker. Cuando la notificación push es recibida, el depurador se detendrá en el punto de ruptura.

Breakpoint depurador

Esto es muy útil, pero a veces las notificaciones pueden ser retrasadas por razones fuera de nuestro control, o la red puede estar temporalmente no disponible. Afortunadamente, puedes todavía probar código que se base en eventos push, presionando el botón Push en el worker.

Esto enviará un push payload (mensaje push), y sucesivamente, lanzará un evento push casi instantáneamente. Puedes reducir tu tiempo de desarrollo porque no necesitarás esperar a que el servidor lance el push.

Depurando workers compartidos

Hay también soporte para debug y workers compartidos. La diferencia más importante es que se muestran en su propia sección dedicada en about:debugging.

Depurando peticiones (y peticiones cacheadas)

Puedes también ahora distinguir entre peticiones normales y las peticiones cacheadas por el worker. Estas peticiones cacheadas son mostradas como Service Worker en la columna Transferidas, en lugar de mostrar la cantidad de datos transferidos.

Service worker en panel de red

Las peticiones iniciadas por service workers pueden ser interceptadas y depuradas mediante un punto de ruptura en el listener del evento fetch.

Evento fetch

Podemos inspeccionar datos tales como la url de petición, las cabeceras http, etc., observando el objeto del evento en la lista de variables cuando el depurador se detiene en el punto de ruptura.

Conclusión

Espero que esto te proporcione una buena perspectiva general de las nuevas características en las que estamos trabajando.

La documentación de referencia para about:debugging está en MDN. Si quieres aprender mas sobre service workers, deberías revisar la guía de uso de service workers, y , por supuesto, el cookbook de service workers, el cual está repleto de estupendas demos y ejemplos.

The following two tabs change content below.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa