Referencia de depuración de JavaScript

• 10/19/2020
• Tiempo de lectura: 9 minutos
• • M

Descubra nuevos flujos de trabajo de depuración con la siguiente referencia completa de las características de depuración de Microsoft Edge DevTools.

Consulta Introducción a la depuración de JavaScript en Microsoft Edge DevTools para conocer los conceptos básicos de la depuración.

Pausar código con puntos de interrupción

Establezca un punto de interrupción para que pueda pausar el código en el medio del Runtime.

Vea pausar el código con puntos de interrupción para obtener información sobre cómo establecer puntos de interrupción.

Recorrer el código

Una vez que el código esté pausado, recorralo, de una línea a la vez, investigando el flujo de control y los valores de propiedad durante el proceso.

Paso a paso por la línea de código

Cuando esté pausado en una línea de código que contenga una función que no sea relevante para el problema que está depurando, haga clic en el botón paso a paso por procedimientos \ ( ) para ejecutar la función sin entrar en ella.

Por ejemplo, supongamos que está depurando el siguiente fragmento de código.

function updateHeader() {
    var day = new Date().getDay();
    var name = getName(); // A
    updateName(name); // D
}
function getName() {
    var name = app.first + ' ' + app.last; // B
    return name; // C
}

Estás pausado el A . Si pulsas paso a paso, DevTools ejecuta todo el código de la función que estás recorriendo, que B es C y. DevTools, luego, se detiene en D .

Ir a la línea de código

Cuando esté pausado en una línea de código que contenga una llamada de función relacionada con el problema que está depurando, haga clic en el botón ir al paso \ ( ) para investigar la función más.

Por ejemplo, supongamos que está depurando el siguiente fragmento de código.

function updateHeader() {
    var day = new Date().getDay();
    var name = getName(); // A
    updateName(name);
}
function getName() {
    var name = app.first + ' ' + app.last; // B
    return name;
}

Estás pausado el A . Al presionar paso a paso por instrucciones, DevTools ejecuta esta línea de código y luego detiene el B .

Paso fuera de la línea de código

Cuando esté pausado dentro de una función que no esté relacionada con el problema que está depurando, haga clic en el botón \ ( ) para ejecutar el resto del código de la función.

Por ejemplo, supongamos que está depurando el siguiente fragmento de código.

function updateHeader() {
    var day = new Date().getDay();
    var name = getName();
    updateName(name); // C
}
function getName() {
    var name = app.first + ' ' + app.last; // A
    return name; // B
}

Estás pausado el A . Si pulsas paso a paso, DevTools ejecuta el resto del código de getName() , que se encuentra B en este ejemplo, y luego realiza una pausa en C .

Ejecutar todo el código hasta una línea específica

Cuando se depura una función Long, puede haber una gran cantidad de código que no está relacionado con el problema que se está depurando.

Puede elegir recorrer todas las líneas, pero eso es tedioso. Puede optar por establecer un punto de interrupción de línea de código en la línea en la que está interesado y, a continuación, hacer clic en el botón reanudar ejecución de script \ ( ), pero hay una forma más rápida.

Haga clic con el botón derecho en la línea de código en la que está interesado y elija continuar aquí. DevTools ejecuta todo el código hasta ese punto y, después, se detiene en esa línea.

Reiniciar la función superior de la pila de llamadas

Mientras esté pausado en una línea de código, haga clic con el botón secundario en cualquier lugar del panel pila de llamadas y elija reiniciar marco para hacer una pausa en la primera línea de la función superior de la pila de llamadas. La función Top es la última función que se ejecutó.

El siguiente fragmento de código es un ejemplo de paso a paso.

function factorial(n) {
    var product = 0; // B
    for (var i = 1; i <= n; i++) {
      product += i;
    }
    return product; // A
}

Estás pausado el A . Después de elegir reiniciar marco, debe pausarse B , sin necesidad de establecer un punto de interrupción ni de elegir reanudar la ejecución del script.

Reanudar script Runtime

Para continuar el tiempo de ejecución después de una pausa de la secuencia de comandos, elija el botón reanudar la ejecución del script \ ( ). DevTools ejecuta la secuencia de comandos hasta el siguiente punto de interrupción, si existe.

Tiempo de ejecución de script forzado

Para ignorar todos los puntos de interrupción y forzar la reanudación de su script, seleccione y mantenga presionado el botón de ejecución de script de reanudación \ ( ) y, a continuación, elija el botón forzar ejecución de script \ ( ).

Cambiar el contexto del hilo

Al trabajar con trabajadores web o trabajos de servicio, elija uno de los contextos que se muestra en el panel subprocesos para cambiar a ese contexto. El icono de flecha azul representa el contexto que está seleccionado actualmente.

Por ejemplo, supongamos que está pausado en un punto de interrupción tanto en el script principal como en el script de trabajo de servicio. Desea ver las propiedades locales y globales del contexto de trabajo de servicio, pero el panel orígenes muestra el contexto de script principal. Al elegir la entrada de trabajador de servicio en el panel de subprocesos , debería poder cambiar a ese contexto.

Ver y editar propiedades locales, de cierre y globales

Mientras esté pausado en una línea de código, use el panel ámbito para ver y editar los valores de las propiedades y variables de los ámbitos local, de cierre y global.

• Haga doble clic en un valor de propiedad para cambiarlo.
• Las propiedades no enumerables están atenuadas.

Ver la pila de llamadas actual

Mientras esté pausado en una línea de código, use el panel pila de llamadas para ver la pila de llamadas que le han llegado a este punto.

Elija una entrada para ir a la línea de código donde se llamó a esa función. El icono de flecha azul representa qué función DevTools está resaltando actualmente.

Copiar seguimiento de pila

Haga clic con el botón secundario en cualquier lugar del panel de la pila de llamadas y elija copiar seguimiento de pila para copiar la pila de llamadas actual en el portapapeles.

El siguiente fragmento de código es un ejemplo de la salida.

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Ignorar un script o una trama de scripts

Marque un script como código de biblioteca cuando desee omitir ese script durante la depuración. Cuando se marca como código de biblioteca, un script se oculta en el panel pila de llamadas y nunca se le detallan las funciones de la secuencia de comandos cuando pasa por el código.

El siguiente fragmento de código es un ejemplo de paso a paso.

function animate() {
    prepare();
    lib.doFancyStuff(); // A
    render();
}

A es una biblioteca de terceros en la que confía. Si está seguro de que el problema que está depurando no está relacionado con la biblioteca de terceros, tiene sentido marcar el script como código de biblioteca.

Marcar un script como código de biblioteca desde el panel Editor

Complete las acciones siguientes para marcar un script como código de biblioteca desde el panel Editor .

1. Abra el archivo.

2. Haga clic con el botón derecho en cualquier parte.

3. Elija marcar como código de biblioteca.

   

   Marcar un script como código de biblioteca desde el panel Editor

Marcar un script como código de biblioteca desde el panel de pila de llamadas

Compelte las acciones de folliwng para marcar un script como código de biblioteca desde el panel pila de llamadas .

1. Haga clic con el botón derecho en una función de la secuencia de comandos.

2. Elija marcar como código de biblioteca.

   

   Marcar un script como código de biblioteca desde el panel de pila de llamadas

Marcar un script como código de biblioteca desde la configuración

Complete las siguientes acciones para marcar un único script o patrón de scripts de la configuración.

1. Abra configuración.

2. Vaya a la pestaña código de biblioteca .

3. Elija Agregar patrón.

4. Escriba el nombre del script o un patrón de Regex de nombres de script para marcarlo como código de biblioteca.

5. Elija Agregar.

   

   Marcar un script como código de biblioteca desde la configuración

Ejecutar fragmentos de código de depuración desde cualquier página

Si se encuentra ejecutando el mismo código de depuración en la consola una y otra vez, considere la posibilidad de recortes. Los fragmentos de código son scripts de tiempo de ejecución que usted crea, almacena y ejecuta dentro de DevTools.

Vea Ejecutar fragmentos de código desde cualquier página para obtener más información.

Ver los valores de las expresiones de JavaScript personalizadas

Use el panel inspección para ver los valores de expresiones personalizadas. Puede ver cualquier expresión válida de JavaScript.

• Elija el botón Agregar expresión \ ( ) para crear una nueva expresión de inspección.
• Elija el botón Actualizar \ ( ) para actualizar los valores de todas las expresiones existentes. Los valores se actualizan automáticamente al recorrer el código.
• Desplace el puntero sobre una expresión y elija el botón eliminar expresión \ ( ) para eliminarla.

Hacer que un archivo minified sea legible

Elija el botón formato \ ( ) para hacer que un archivo minified sea legible para el usuario.

Editar un script

Al corregir un error, a menudo desearás probar algunos cambios en el código de JavaScript. No es necesario realizar los cambios en un editor externo o IDE y, a continuación, volver a cargar la página. Puede editar su script en DevTools.

Complete las acciones siguientes para editar un script.

1. Abra el archivo en el panel Editor del panel fuentes .

2. Realice los cambios en el panel Editor .

3. Seleccione Ctrl + S \ (Windows, Linux ) o Command + S \ (MacOS ) para guardar. DevTools revisa todo el archivo JS en el motor de JavaScript de Microsoft Edge.

   

   El panel Editor

Deshabilitar JavaScript

Vaya a deshabilitar JavaScript con Microsoft Edge DevTools.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

• Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
• Tweet a @EdgeDevTools.
• Enviar una sugerencia a la webque queremos.
• Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.