Mejoras de Service Worker

Se han mejorado las herramientas de red, aplicación y orígenes para ayudarle a trabajar con los trabajadores del servicio y las solicitudes de red que pasan a través de cada trabajador del servicio.

Las mejoras simplifican las siguientes tareas:

  • Depuración basada en escalas de tiempo de trabajo de servicio.
    • El inicio de una solicitud y la duración del arranque.
    • Actualice al registro del trabajador de servicio.
    • Tiempo de ejecución de una solicitud mediante el controlador de eventos fetch .
    • Tiempo de ejecución de todos los eventos de captura para cargar un cliente.
  • Explore los detalles en tiempo de ejecución de los controladores de eventos de captura, instale controladores de eventos y active controladores de eventos.
  • Entre y salga del controlador de eventos fetch con información de script de página.

Las mejoras abarcan las siguientes herramientas:

  • La herramienta Red . Seleccione una solicitud de red que se ejecute a través de un trabajador del servicio y acceda a la escala de tiempo correspondiente del trabajador del servicio en la herramienta De tiempo .

  • La herramienta Aplicación . Para depurar los trabajadores del servicio, use la página Trabajadores del servicio .

  • La herramienta Orígenes . Obtener acceso a la información de script de página al acceder a los controladores de eventos de captura paso a paso.

Red

Escala de tiempo del trabajo de servicio en la herramienta Red

Puede acceder a las características de depuración de service worker en la herramienta Red de cualquiera de las siguientes maneras:

  • Directamente en la herramienta Red .
  • Se inició en la herramienta Aplicación .

Enrutamiento de solicitudes

Para facilitar la visualización del enrutamiento de solicitudes, las escalas de tiempo ahora muestran el inicio del trabajo de servicio y los eventos de respondWith captura. Para depurar y visualizar una solicitud de red que se pasó a través de un trabajo de servicio:

  1. Seleccione la solicitud de red que pasó por un trabajo de servicio.
  2. Abra la herramienta De tiempo .

Capturar eventos

Para obtener más información sobre los respondWith eventos de captura, haga clic en la flecha desplegable situada a la izquierda de respondWith. Para ver más detalles sobre la solicitud original y la respuesta recibida, haga clic en las flechas desplegables correspondientes.

Aplicación

Vista de aplicación

Escala de tiempo de actualización de Service Worker

El equipo de Microsoft Edge DevTools agregó una escala de tiempo en la herramienta Aplicación para reflejar el ciclo de vida de actualización del trabajo del servicio. Esta escala de tiempo muestra los eventos de instalación y activación. Cada uno de los eventos tiene una flecha desplegable correspondiente para proporcionarle más detalles.

Solicitud de enrutamiento y captura de eventos

Ahora puede acceder a las escalas de tiempo del trabajo del servicio a través de la herramienta Red . Esta característica beneficia el rendimiento, minimiza la duplicación de la interfaz de usuario y crea una experiencia de depuración más completa.

  1. Abra el trabajo de servicio que va a depurar.

  2. Haga clic en el botón Red para abrir la experiencia de enrutamiento de solicitudes.

  3. Use las flechas desplegables respondWith para capturar la información de solicitud y respuesta de eventos.

La herramienta Red muestra las solicitudes de red que pasaron por el trabajo de servicio que está depurando. El filtro automático es una manera de restringir la exploración.

Consulte también Herramienta de aplicación para administrar el almacenamiento.

Orígenes

Árbol DOM

Para encontrar más información sobre la pila, establezca un punto de interrupción en el controlador de captura. Los detalles conducen a dónde se solicita el recurso en el script de página.

Cuando el depurador se detiene dentro de un controlador de captura, se muestra una información de pila combinada en el panel situado a la derecha. Después, puede moverse por los marcos de pila.

Trabajo futuro

El equipo de Microsoft Edge DevTools planea desarrollar aún más los detalles de la memoria caché y está investigando más formas de mejorar la experiencia de depuración del trabajador del servicio para los desarrolladores de aplicaciones web progresivas (PWA ).