Compartir a través de

Herramienta del analizador de bloqueos

  • Artículo

Use la herramienta Analizador de bloqueos para analizar y diagnosticar rápidamente los bloqueos de la aplicación web en producción. En la herramienta Analizador de bloqueos , puede especificar un seguimiento de pila de JavaScript que recopiló en producción y, a continuación, aplicar los mapas de origen para desminificar el seguimiento de pila para que pueda depurar más rápido. La herramienta Analizador de bloqueos permite realizar un seguimiento minificado de la pila de JavaScript y trabajar rápidamente hacia atrás para determinar qué líneas de código provocaron el error.

La herramienta Del analizador de bloqueos

Cuando una aplicación web se bloquea o se bloquea inesperadamente, esto puede dar lugar a una pérdida de datos y a una mala experiencia para los usuarios. Recopilar información sobre los bloqueos que experimentan los usuarios es útil para diagnosticar y corregir la causa principal de los bloqueos. Sin embargo, el código que se ejecuta en producción a menudo se minifica, lo que hace que también se minifiquen los seguimientos de pila de JavaScript que se registran al iniciar la sesión. La herramienta Analizador de bloqueos le ayuda a asignar los seguimientos de pila minificados recopilados en producción al código fuente original, de modo que pueda identificar rápidamente la causa principal de los bloqueos.

Este es un ejemplo de un seguimiento de pila minificado que puede recopilar de la aplicación web en producción:

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Los nombres de variable y función a menudo se acortan, como la variable t anterior. Las direcciones URL de script suelen apuntar a un archivo de agrupación de una sola línea compilado, como el prod.bundle.js archivo anterior.

En comparación, este es un ejemplo de un seguimiento de pila sin determinar, con nombres de variables y funciones originales, nombres de archivo de origen originales y números de línea:

Uncaught Error: test error
    at shorten (util.ts:9:9)
    at processUIString (util.ts:2:10)
    at todoMarkupBuilder (todo.ts:35:41)
    at Todo.render (todo.ts:24:12)
    at app.ts:36:39
    at Array.map (<anonymous>)
    at App.render (app.ts:36:22)
    at new App (app.ts:29:10)
    at index.ts:9:13
    at index.ts:9:33

Hay dos pasos para analizar los seguimientos de pila de producción minificados en la herramienta Analizador de bloqueos :

  1. En primer lugar, recopila seguimientos de pila con formato especial de la aplicación web en producción.

    Hay muchas maneras de recopilar seguimientos de pila de los exploradores que usan los usuarios. En la sección Recopilación de seguimientos de pila en producción, a continuación se proporcionan ejemplos y recomendaciones. También se explica cómo dar formato a los seguimientos de pila para que se puedan analizar en la herramienta Analizador de bloqueos .

  2. A continuación, analizará los seguimientos de pila en la herramienta Analizador de bloqueos .

    En la sección Analizar seguimientos de pila de la herramienta Analizador de bloqueos, a continuación se explica cómo hacer que los mapas de origen sean accesibles primero en DevTools y, a continuación, cómo usar la herramienta Analizador de bloqueos para analizar los seguimientos de la pila.

Recopilación de seguimientos de pila en producción

La herramienta Analizador de bloqueos no recopila seguimientos de pila automáticamente. Primero debe recopilar seguimientos de pila de la aplicación web mediante las herramientas y servicios que están disponibles para usted. Estas son algunas maneras de recopilar seguimientos de pila en producción:

  • Se recomienda usar un sistema de telemetría como Application Insights de Azure Monitor que pueda capturar información sobre errores no controlados del código JavaScript.

  • También puede escribir código JavaScript para capturar errores no controlados en la aplicación web. En el ejemplo siguiente se muestra cómo usar el window.onerror controlador de eventos para capturar errores no controlados en una aplicación web:

    window.onerror = function (message, source, line, column, error) {
  // Get the stack trace from the error object.
  const stackTrace = error.stack;

  // Send the stack trace to your telemetry system.
  // Code not shown.
};

Dar formato a los seguimientos de pila para la herramienta Del analizador de bloqueos

La recopilación de seguimientos de pila en producción no es suficiente. La herramienta Analizador de bloqueos necesita seguimientos de pila para incluir una sección denominada Módulos de origen.

Este es un ejemplo de un seguimiento de pila que incluye la sección Módulos de origen :

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Source modules:
    https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js 8b544e37b35d920a39d0e10f70fddc29b25d0db362741f3071eff86cef8613e9

La sección Módulos de origen incluye las direcciones URL de los archivos JavaScript implicados en el seguimiento de la pila y un hash del contenido de cada archivo. El hash es una cadena de 64 caracteres de caracteres hexadecimales que corresponde al hash SHA-256 del script que se ejecuta. Se trata de un hash byte por byte del contenido de cada archivo JavaScript. Las direcciones URL y los hashes permiten que la herramienta Analizador de bloqueos recupere más adelante los mapas de origen que se usaron para desminificar el seguimiento de la pila.

Para agregar la sección Módulos de origen a los seguimientos de pila de errores, use la biblioteca DevTools Crash Analyzer Support de Edge en la aplicación web, como se indica a continuación:

  1. Agregue la biblioteca de soporte técnico de Edge DevTools Crash Analyzer en el proyecto mediante npm:

    npm install @microsoft/edge-devtools-crash-analyzer-support

  2. Importe la biblioteca en el código JavaScript y, a continuación, llame a la installErrorStackModuleAnnotations función :

    import { installErrorStackModuleAnnotations } from '@microsoft/edge-devtools-crash-analyzer-support';

installErrorStackModuleAnnotations(Error);

Análisis de seguimientos de pila en la herramienta Analizador de bloqueos

La herramienta Analizador de bloqueos de DevTools no recuerda los seguimientos de pila con formato especial que recopiló de los usuarios en producción. Si los mapas de origen también contienen el código fuente original, la herramienta Analizador de bloqueos le mostrará los nombres de archivo originales y los nombres de función que componen el seguimiento de la pila.

Hacer que los mapas de origen sean accesibles en DevTools

La herramienta Analizador de bloqueos usa la información del módulo Origen que se encuentra en el seguimiento de la pila para recuperar los mapas de origen que corresponden a los archivos de script del seguimiento de la pila. Esto significa que primero debe hacer que los mapas de origen sean accesibles en DevTools.

La herramienta Analizador de bloqueos funciona mejor si los mapas de origen se almacenan de forma segura mediante el servidor de símbolos de Azure Artifacts. Esto se debe a que DevTools puede recuperar mapas de origen del servidor de símbolos de Azure Artifacts a petición al analizar el error. Consulte Depuración segura del código original mediante la publicación de asignaciones de origen en el servidor de símbolos de Azure Artifacts.

Si no usa el servidor de símbolos de Azure Artifacts, puede seguir usando la herramienta Analizador de bloqueos , asegurándose de que devTools pueda acceder a los mapas de origen correspondientes al seguimiento de la pila. Por ejemplo, si ha cargado mapas de origen antes mediante el //# sourceMappingURL= comentario, DevTools almacena en caché los mapas de origen para su reutilización posterior. Para obtener más información, consulte Mapas de origen en DevTools en Asignación del código procesado al código fuente original para la depuración.

DevTools no almacena en caché los mapas de origen cuando el nombre de dominio es localhost. Esto significa que, si no usa el servidor de símbolos de Azure Artifacts, la herramienta Analizador de bloqueos solo funcionará para los seguimientos de pila que se recopilan de entornos de producción, no de entornos de desarrollo locales que usan el localhost dominio.

Abrir la herramienta Del analizador de bloqueos

La herramienta Del analizador de bloqueos es una herramienta de vista rápida; De forma predeterminada, se abre en el panel Vista rápida , para que pueda usarlo junto con las demás herramientas que están abiertas en la barra de actividad.

En el menú Más herramientas

Para abrir la herramienta Analizador de bloqueos mediante el menú DevTools Más herramientas :

  1. En Microsoft Edge, seleccione Configuración y mucho más (icono ) >Más herramientas>Abrir Herramientas de desarrollo (Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS)). Se abre DevTools.

  2. En DevTools, presione Esc para abrir la barra de herramientas Vista rápida en la parte inferior (si aún no está abierta). En la barra de herramientas Vista rápida , haga clic en el botón Más herramientas (el icono y, a continuación, seleccione Analizador de bloqueos.

Desde el menú Comando

Para abrir la herramienta Analizador de bloqueos mediante el menú Comandos:

  1. En Microsoft Edge, seleccione Configuración y mucho más (icono ) >Más herramientas>Abrir Herramientas de desarrollo (Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS)). Se abre DevTools.

  2. En DevTools, haga clic en el botón Personalizar y controlar DevTools (el botón y, a continuación, seleccione Ejecutar comando. O bien, cuando DevTools tenga el foco, presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS). Se abre el menú Comando.

  3. Empiece a escribir el analizador de bloqueos y, a continuación, seleccione el comando Mostrar analizador de bloqueos [Vista rápida] . La herramienta Analizador de bloqueos se abre en el panel Vista rápida .

Escriba un seguimiento de pila en la herramienta Del analizador de bloqueos.

Si desea probar la herramienta Analizador de bloqueos pero no tiene un seguimiento de pila para analizar, siga estos pasos para recopilar un seguimiento de pila de ejemplo:

  1. En Microsoft Edge, abra la demostración del analizador de bloqueos de DevTools en una nueva ventana o pestaña.

  2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  3. En DevTools, en la barra de actividad, haga clic en Consola (icono de consola). Se abre la herramienta Consola .

  4. Seleccione el seguimiento de la pila de errores que se muestra en la herramienta Consola y cópielo.

Para usar la herramienta Analizador de bloqueos en DevTools:

  1. Abra la herramienta Analizador de bloqueos de DevTools, como se describe anteriormente en Abrir la herramienta del analizador de bloqueos.

  2. Escriba el seguimiento de pila con formato especial en el panel izquierdo de la herramienta Del analizador de bloqueos :

    La herramienta Analizador de bloqueos, con la pila de llamadas mejorada pegada en el panel izquierdo

  3. En la herramienta Analizador de bloqueos , haga clic en el botón Analizar (el icono (o presione Ctrl+Entrar).

    En el panel derecho se muestran los nombres de archivo originales y los nombres de función que componen el seguimiento de la pila:

    Uso de la herramienta Del analizador de bloqueos para depurar una excepción de JavaScript no mortal

    Esto carga los mapas de origen que corresponden a los módulos de origen e intenta desminificar los marcos de pila para los que el contenido de origen de JavaScript o TypeScript estaba contenido en el mapa de origen.

  4. Si el código fuente está disponible en los mapas de origen de un marco, haga clic en el marco para mostrar el código fuente.

    El código fuente original aparece en la herramienta Orígenes y la línea en cuestión está resaltada:

    Archivo de código sin especificar y línea de código al que se accede haciendo clic en el panel derecho de la pestaña Analizador de bloqueos

  5. Para copiar el seguimiento de pila sinminificar, en la barra de herramientas de la pestaña Analizador de bloqueos , haga clic en el botón Copiar seguimiento de pila sinminificar (el icono Copiar seguimiento de pila sinminificar). Esto genera y copia en el Portapapeles el seguimiento de pila completo y sinminificar, como un seguimiento de pila en el formato de seguimiento de pila convencional, excepto con información que coincida con el código original, incluidos los nombres de función, los nombres de archivo de origen y los números de línea y columna:

Uncaught Error: test error
    at shorten (webpack://devtools-crash-analyzer/src/util.ts:9:9)
    at processUIString (webpack://devtools-crash-analyzer/src/util.ts:2:10)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:39)
    at Array.map (<anonymous>)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:22)
    at constructor for App (webpack://devtools-crash-analyzer/src/app.ts:29:10)
    at [Global code: "webpack://devtools-crash-analyzer/src/index.ts"] (webpack://devtools-crash-analyzer/src/index.ts:9:13)
    at (anonymous function) (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:2:2897)

Características de la interfaz de usuario

La herramienta Analizador de bloqueos tiene las siguientes características de interfaz de usuario:

Elemento de la interfaz de usuario Descripción
Panel izquierdo Seguimiento de pila que se va a analizar.
Panel derecho Muestra los nombres de archivo originales y los nombres de función que componen el seguimiento de la pila.
Botón Nuevo análisis (icono ") Crea un nuevo panel izquierdo en blanco para pegar un nuevo seguimiento de pila.
El botón Analizar (el icono Crea un nuevo análisis en el panel derecho, en función del seguimiento de la pila en el panel izquierdo.
Lista desplegable Análisis (lista desplegable ") Muestra la lista de análisis.
Botón Quitar este análisis (el icono Quita el análisis actual.
Botón Copiar seguimiento de pila sinminificar (icono Copiar seguimiento de pila sinminificar) Genera y copia en el Portapapeles el seguimiento de pila completo y sinminificar, como un seguimiento de pila en el formato de seguimiento de pila convencional, excepto con información que coincida con el código original, incluidos los nombres de función, los nombres de archivo de origen y los números de línea y columna.
Botón Abrir la configuración del servidor de símbolos (el icono ") Mostrar o modificar la configuración del servidor de símbolos de Azure Artifacts.
Botón Cómo usar (el icono Abre el presente artículo.

Enviar comentarios

Deje comentarios en el repositorio de comentarios de MicrosoftEdge/DevTools y háganos saber qué funciona bien, qué no y qué le gustaría para estas características.

Consulte también

Vínculos externos: