Introducción a la depuración de JavaScript en Microsoft Edge DevTools

Este artículo le enseña el flujo de trabajo básico para depurar cualquier problema de JavaScript en DevTools.

Paso 1: Reproducir el error

Encontrar una serie de acciones que reproducen un error de forma coherente siempre es el primer paso para la depuración.

1. Elija el siguiente vínculo Abrir demostración y abra la página web en una nueva pestaña. Para abrir la demostración en una nueva pestaña, seleccione y mantenga Ctrl presionada (Windows, Linux) o (macOS) y, a Command continuación, elija Abrir demostración.

   Demostración abierta

2. Escriba 5 en el cuadro de texto Número 1.

3. Escriba 1 en el cuadro de texto Número 2.

4. Elija Agregar número 1 y número 2. La etiqueta debajo del botón indica 5 + 1 = 51 . El resultado debe ser 6 . A continuación, corrija el error de adición que es el error.

   

   5 + 1 da como 51 resultado , pero debe ser 6

Paso 2: Familiarizarse con la interfaz de usuario de la herramienta Orígenes

DevTools proporciona muchas herramientas diferentes para distintas tareas. Entre las tareas diferentes se incluyen cambiar CSS, generar perfiles de rendimiento de carga de página y supervisar solicitudes de red. La herramienta Orígenes es donde se depura JavaScript.

1. Para abrir la herramienta Consola en DevTools, Control + Shift + J seleccione (Windows, Linux) o Command + Option + J (macOS).

   

   La herramienta Consola

2. Elija la herramienta Orígenes.

   

   La herramienta Orígenes

La interfaz de usuario de la herramienta Orígenes tiene tres partes.

• Panel Navegador (en la esquina superior izquierda). Aquí se enumeran todos los archivos que solicita la página web.
• Panel Editor (en la esquina superior derecha). Después de elegir un archivo en el panel Navegador, este panel muestra el contenido del archivo.
• El panel Depurador (en la parte inferior). Este panel proporciona herramientas para inspeccionar JavaScript para la página web. Si la ventana DevTools es amplia, este panel se muestra a la derecha del panel Editor.

Paso 3: Pausar el código con un punto de interrupción

Un método común para depurar este tipo de problema es insertar varias instrucciones en el código y, a continuación, inspeccionar los valores a medida que console.log() se ejecuta el script. Por ejemplo:

function updateLabel() {
    var addend1 = getNumber1();
    console.log('addend1:', addend1);
    var addend2 = getNumber2();
    console.log('addend2:', addend2);
    var sum = addend1 + addend2;
    console.log('sum:', sum);
    label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

El console.log() método puede realizar el trabajo, pero los puntos de interrupción lo hacen más rápido. Un punto de interrupción permite pausar el código en medio del tiempo de ejecución y examinar todos los valores en ese momento. Los puntos de interrupción tienen las siguientes ventajas sobre el console.log() método.

• Con , debe abrir manualmente el código fuente, buscar el código relevante, insertar las instrucciones y, a continuación, actualizar la página web para mostrar los mensajes en console.log() console.log() la consola. Con los puntos de interrupción, puede pausar el código relevante sin saber siquiera cómo se estructura el código.
• En las console.log() instrucciones, debe especificar explícitamente cada valor que desea inspeccionar. Con puntos de interrupción, DevTools muestra los valores de todas las variables en ese momento. A veces, las variables que afectan al código están ocultas y ocultas.

En resumen, los puntos de interrupción pueden ayudarle a encontrar y corregir errores más rápido que el console.log() método.

If you step back and think about how the app works, you may make an educated guess that the incorrect sum ( 5 + 1 = 51 ) is computed in the event listener associated with the click Add Number 1 and Number 2 button. Por lo tanto, probablemente quiera pausar el código durante el tiempo en que se ejecute click el agente de escucha. Los puntos de interrupción de escucha de eventos le permiten hacer exactamente lo siguiente:

1. En el panel Depurador, elija Puntos de interrupción de escucha de eventos para expandir la sección. DevTools muestra una lista de categorías de eventos expandibles, como Animación y Portapapeles.

2. Junto a la categoría de eventos Mouse, elija Expandir ( ). DevTools muestra una lista de eventos de mouse, como clic y mousedown. Cada evento tiene una casilla junto a él.

3. Seleccione la casilla situada junto a. DevTools ahora está configurado para pausar automáticamente cuando se ejecuta cualquier click escucha de eventos.

   

   Seleccione la casilla situada junto a hacer clic

4. En la demostración, vuelve a elegir Agregar número 1 y Número 2. DevTools pausa la demostración y resalta una línea de código en la herramienta Orígenes. DevTools debe pausar la línea 16 en get-started.js .

   if (inputsAreEmpty()) {
   

   Si pausa en una línea de código diferente, elija Reanudar ejecución de script ( Reanudar ejecución de script ) hasta que se correcta.

   Nota

   Si hizo una pausa en una línea diferente, tiene una extensión de explorador que registra un agente de escucha de eventos en todas las páginas click web que visita. Está en pausa en el agente click de escucha de la extensión. Si usa el modo InPrivate para examinar en privado , lo que deshabilita todas las extensiones, es posible que vea que se pausa en la línea de código deseada cada vez.

Los puntos de interrupción de escucha de eventos son solo uno de los muchos tipos de puntos de interrupción disponibles en DevTools. Memoriza todos los tipos diferentes para ayudarte a depurar escenarios diferentes lo antes posible. Para obtener información sobre cuándo y cómo usar cada tipo, vea Pause your code with breakpoints.

Paso 4: Paso a paso por el código

Una causa común de errores es cuando un script se ejecuta en el orden incorrecto. El paso a través del código le permite recorrer el tiempo de ejecución del código. Puede recorrer una línea a la vez para ayudarle a averiguar exactamente dónde se ejecuta el código en un orden diferente del esperado. Pruébalo ahora:

1. Elija Paso a paso sobre la siguiente llamada de función ( Paso a paso sobre la siguiente llamada de función ). DevTools ejecuta el siguiente código sin entrar en él.

   if (inputsAreEmpty()) {
   

   Nota

   DevTools omite algunas líneas de código. Esto se debe a que se evalúa como false, por lo que no se ejecuta el bloque inputsAreEmpty() de código de la if instrucción.

2. En la herramienta Orígenes de DevTools, elija Paso a siguiente llamada de función ( Paso a siguiente llamada de función ) para pasar por el tiempo de ejecución de la función, una línea updateLabel() vez.

Revisar una línea a la vez es la idea básica de pasar por el código. Si revisa el código en , el error probablemente esté en get-started.js algún lugar de la updateLabel() función. En lugar de pasar por todas las líneas de código, puede usar otro tipo de punto de interrupción para pausar el código más cerca de la ubicación probable del error.

Paso 5: Establecer un punto de interrupción de línea de código

Los puntos de interrupción de línea de código son el tipo más común de punto de interrupción. Cuando llegue a la línea de código específica que desea pausar, use un punto de interrupción de línea de código.

1. Vea la última línea de código en updateLabel() :

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. A la izquierda, el número de esta línea de código en particular se muestra como 34. Elija la línea 34. DevTools muestra un icono rojo a la izquierda de 34. El icono rojo indica que un punto de interrupción de línea de código está en esta línea. DevTools siempre se pausa antes de que se ejecute esta línea de código.

3. Elija Resume script execution ( Resume script execution ). El script continúa en ejecución hasta que llega a la línea 34. En las líneas 31, 32 y 33, DevTools imprime los valores de , y a la derecha de los dos puntos y coma addend1 addend2 en cada sum línea.

   

   DevTools se pausa en el punto de interrupción de línea de código en la línea 34

Paso 6: Comprobar valores de variables

Los valores de addend1 , addend2 y parecen sum sospechosos. Los valores están entre comillas. Las comillas significan que el valor es una cadena, que es una buena hipótesis para explicar la causa del error. Recopila más información sobre la situación. DevTools proporciona muchas herramientas para examinar valores de variables.

Método 1: panel Ámbito

Si se pausa en una **** línea de código, el panel Ámbito muestra las variables locales y globales que están definidas actualmente, junto con el valor de cada variable. También muestra variables de cierre, según corresponda. Haga doble clic en un valor de variable para editarlo. Si no se pausa en una línea de código, el panel Ámbito está vacío.

Método 2: Ver expresiones

El panel Ver permite supervisar los valores de variables (como ) o sum expresiones (como typeof sum ). Puede almacenar cualquier expresión de JavaScript válida en una expresión watch.

1. Elija el panel Ver.
2. Elija Agregar expresión de reloj ( Agregar expresión de reloj ).
3. Escriba typeof sum.
4. Seleccione Enter. DevTools muestra typeof sum: "string" . El valor a la derecha de los dos puntos es el resultado de la expresión Watch.

Como se sospecha, sum se está evaluando como una cadena, cuando debe ser un número. Ahora ha confirmado que el tipo de valor es la causa del error.

Método 3: La consola

La consola le permite ver el console.log() resultado. También puede usar la consola para evaluar instrucciones de JavaScript arbitrarias mientras el depurador se pausa en una instrucción de código. Para la depuración, puede usar la consola para probar posibles correcciones de errores.

1. Si la herramienta Consola está cerrada, seleccione Esc para abrirla. La herramienta Consola se abre en el panel inferior de la ventana DevTools.

2. En la consola, escriba parseInt(addend1) + parseInt(addend2) . La instrucción que la herramienta se pausa en una línea de código donde addend1 y están en el addend2 ámbito.

3. Seleccione Enter. DevTools evalúa la instrucción e imprime , que es el 6 resultado que espera que la demostración produzca.

   

   La herramienta Consola, después de evaluar parseInt(addend1) + parseInt(addend2)

Paso 7: Aplicar una corrección

Hemos identificado una posible corrección para el error. A continuación, edite el código JavaScript directamente en la interfaz de usuario de DevTools y vuelva a ejecutar la demostración para probar la corrección, de la siguiente manera.

1. Elija Resume script execution ( Resume script execution ).
2. En el panel Editor, reemplace la línea var sum = addend1 + addend2 por var sum = parseInt(addend1) + parseInt(addend2) .
3. Seleccione Control + S (Windows, Linux) o Command + S (macOS) para guardar el cambio.
4. Elija Desactivar puntos de interrupción ( Desactivar puntos de ). Cambia de color azul para indicar que la opción está activa. Mientras se establecen los puntos de interrupción Deactivate, DevTools omite los puntos de interrupción establecidos.
5. Pruebe la demostración con valores diferentes. La demostración ahora calcula correctamente.

Pasos siguientes

¡Enhorabuena! Ahora sabe cómo obtener el máximo partido de Microsoft Edge DevTools al depurar JavaScript. Las herramientas y los métodos que aprendió en este artículo pueden ahorrarle incontables horas.

En este artículo se mostraron dos formas de establecer puntos de interrupción. DevTools también proporciona formas de establecer puntos de interrupción para pausar el código cuando se cumplen determinadas condiciones, como:

• Puntos de interrupción condicionales que solo se desencadenan cuando la condición que se proporciona es true.
• Puntos de interrupción en excepciones capturadas o no capturadas.
• Puntos de interrupción XHR que se desencadenan cuando la dirección URL solicitada coincide con una subcadena que se proporciona.

Para obtener más información sobre cuándo y cómo usar cada tipo, vaya a Pausar el código con puntos de interrupción.

En este artículo no se explica un par de controles de paso a paso de código. Para obtener más información, vaya a Paso sobre la línea de código en el artículo "Usar las características del depurador".

Consulte también

• Usar las características del depurador: usar la interfaz de usuario del depurador en la herramienta Orígenes.
• Introducción a la herramienta Sources: presenta el depurador de JavaScript y el editor de código.

Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.