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 Abrir demostración. Mantenga Control presionado (Windows, Linux) o Command (macOS) y abra la demostración en una nueva pestaña del explorador.

    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 resultado 51, 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, seleccione Control + Shift + J (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.

Las 3 partes de la interfaz de usuario de la herramienta Orígenes

  1. El panel Explorador de archivos (Sección 1 de la figura anterior). Aquí se enumeran todos los archivos que solicita la página web.
  2. El panel Editor de código (Sección 2 de la figura anterior). Después de seleccionar un archivo en el panel Explorador de archivos, el contenido de ese archivo se muestra aquí.
  3. El panel Depuración de JavaScript (Sección 3 de la figura anterior). Varias 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 de código.

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.

Si retroces y piensas en cómo funciona la aplicación, puedes hacer una conjetura educada de que la suma incorrecta ( ) se calcula en el agente de escucha de eventos asociado con los botones Agregar número 1 y Número 5 + 1 = 51 click 2. 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 Depuración de JavaScript, 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 (  Expandir icono ). 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 detenga  en la línea 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.

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 sobre la siguiente llamada de función ( 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  a updateLabel() la 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 Reanudar ejecución de script ( Reanudar ejecución de script  ). El script continúa en ejecución hasta que llega a la línea 33. 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.

Panel Ámbito

Método 2: Ver expresiones

El panel Ver expresiones le permite supervisar los valores de las variables a lo largo del tiempo. Como su nombre indica, las expresiones de reloj no se limitan a variables. Puede almacenar cualquier expresión de JavaScript válida en una expresión Watch. Pruébalo ahora.

  1. Elija el panel Ver.
  2. Elija Agregar expresión ( Agregar expresión  ).
  3. Escribe 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.

Nota

En el panel Ver expresión (bottom-right) de la siguiente figura, se muestra la expresión typeof sum watch. Si la ventana DevTools es grande, el panel Ver expresión se encuentra a la derecha encima del panel Puntos de interrupción de escucha de eventos.

Panel Expresión de reloj

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 mensajes y también puede usarlos para evaluar console.log() instrucciones de JavaScript arbitrarias. Para la depuración, puede usar la consola para probar posibles correcciones de errores. Pruébalo ahora.

  1. Si la herramienta Consola está cerrada, seleccione Escape 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

Si encuentras una solución para el error, prueba la corrección editando el código y rerunning la demostración. Puede editar código JavaScript directamente en la interfaz de usuario de DevTools y aplicar la corrección. Pruébalo ahora.

  1. Elija Reanudar ejecución de script ( Reanudar ejecución de script  ).
  2. En el Editor de código, reemplace la línea 32, 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  interrupción ). 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.

Precaución

Este flujo de trabajo solo aplica una corrección al código que se ejecuta en el explorador. No corrige el código de todos los usuarios que visitan la página web. Para ello, debe corregir el código que está en los servidores.

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.

Este artículo solo le enseñó dos formas de establecer puntos de interrupción. DevTools ofrece muchas otras formas, incluida la siguiente configuración.

  • 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.

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 .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

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