Introducción a la depuración de JavaScript

En este artículo se enseña el flujo de trabajo básico para depurar cualquier problema de JavaScript mediante DevTools.

Paso 1: Reproducir el error

El primer paso en la depuración es buscar una secuencia de acciones que reproducen un error de forma coherente.

1. Abra la página web de demostración Introducción a la depuración de JavaScript en una nueva ventana o pestaña. Para abrir la página web, haga clic con el botón derecho en el vínculo y seleccione "Abrir vínculo en nueva pestaña" o "Abrir vínculo en nueva ventana" en la ventana emergente. También puede presionar y mantener presionada la tecla Ctrl (para Windows, Linux) o Comando (para macOS) y, a continuación, hacer clic en el vínculo.

   Sugerencia: Abra Microsoft Edge en modo InPrivate para asegurarse de que Microsoft Edge se ejecuta en un estado limpio. Para obtener más información, consulte Examinar InPrivate en Microsoft Edge.

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

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

4. Haga clic en Agregar número 1 y número 2. La etiqueta debajo del botón indica 5 + 1 = 51, en lugar del resultado esperado de 6:

   

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

DevTools proporciona varias herramientas para diferentes tareas. Estas tareas incluyen el cambio de CSS, la generación de perfiles de rendimiento de carga de páginas y la supervisión de solicitudes de red. La herramienta Orígenes es donde se depura JavaScript.

1. 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:

   

2. Seleccione la herramienta Orígenes . Seleccione la pestaña Página y, a continuación, seleccione el archivo JavaScript, get-started.js:

   

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 seleccionar un archivo en el panel Navegador , este panel muestra el contenido del archivo.

• Panel Depurador (en la parte inferior). En este panel se proporcionan herramientas para inspeccionar javascript para la página web. Si la ventana de 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 console.log() instrucciones en el código y, a continuación, inspeccionar los valores a medida que 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 hacer el trabajo, pero los puntos de interrupción lo hacen más rápido. Un punto de interrupción le permite pausar el código en medio del tiempo de ejecución y examinar todos los valores en ese momento en el tiempo. Los puntos de interrupción tienen las siguientes ventajas sobre el console.log() método .

• Con console.log(), debe abrir manualmente el código fuente, buscar el código pertinente, insertar las console.log() instrucciones y, a continuación, actualizar la página web para mostrar los mensajes en la consola. Con los puntos de interrupción, puede pausar el código pertinente sin tener que saber cómo se estructura el código.

• console.log() En las instrucciones, debe especificar explícitamente cada valor que quiera inspeccionar. Con puntos de interrupción, DevTools muestra los valores de todas las variables en ese momento en el tiempo. A veces, las variables que afectan al código están ocultas y ofuscadas.

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

Puntos de interrupción del agente de escucha de eventos

Si retrocede y piensa en cómo funciona la aplicación, puede hacer una estimación educada de que la suma incorrecta (5 + 1 = 51) se calcula en el agente de escucha de click eventos asociado al botón Agregar número 1 y Número 2 . Por lo tanto, probablemente quiera pausar el código alrededor del tiempo que se ejecuta el agente de click escucha. Los puntos de interrupción del agente de escucha de eventos le permiten hacer lo siguiente:

1. En el panel Navegador, (index) está seleccionado de forma predeterminada. Haga clic en get-started.js.

2. En el panel Depurador , haga clic en Puntos de interrupción del agente de escucha de eventos para expandir la sección. DevTools revela una lista de categorías de eventos, como Animación y Portapapeles.

3. Haga clic en Expandir () mediante el evento Mouse para abrir esa categoría. DevTools revela una lista de eventos del mouse, como clic y mousedown. Cada evento tiene una casilla junto a él.

4. Active la casilla junto a para hacer clic en:

   

   DevTools ahora está configurado para pausarse automáticamente cuando se ejecuta cualquier click agente de escucha de eventos.

5. En la página web de demostración representada, haga clic en el botón Agregar número 1 y Número 2 de nuevo. DevTools pausa la demostración y resalta una línea de código en la herramienta Orígenes . DevTools se pausa en la línea 16 en get-started.js, que se muestra en el siguiente fragmento de código:

   if (inputsAreEmpty()) {
   

   Si se detiene en otra línea de código, haga clic en Reanudar ejecución de script () hasta que se detenga en la línea correcta.

   Nota

   Si ha pausado en una línea diferente, tiene una extensión de explorador que registra un click agente de escucha de eventos en cada página web que visite. Está en pausa en el click agente 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 del agente de escucha de eventos son solo uno de los muchos tipos de puntos de interrupción disponibles en DevTools. Memorizar todos los tipos diferentes para ayudarle a depurar diferentes escenarios lo más rápido posible. Para obtener información sobre cuándo y cómo usar cada tipo, consulte Pausar el código con puntos de interrupción.

Paso 4: Recorrer el código

Una causa común de errores es cuando un script se ejecuta en el orden incorrecto. Recorrer el código paso a paso le permite recorrer el entorno de ejecución del código. Se recorre 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ébelo ahora:

1. Haga clic en Paso a paso por encima de la siguiente llamada de función (). DevTools ejecuta el código siguiente sin entrar en él:

   if (inputsAreEmpty()) {
   

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

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

Esa es la idea básica de recorrer el código paso a paso. Si observa el código de get-started.js, puede ver que el error probablemente esté en algún lugar de la updateLabel() función. En lugar de recorrer paso a paso todas las líneas de código, puede usar otro tipo de punto de interrupción (un punto de interrupción de línea de código) 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 de punto de interrupción más comú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. Examine la última línea de código en updateLabel():

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

2. El número de línea de label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; es 34. Haga clic en la línea 34. DevTools muestra un círculo rojo a la izquierda de 34. El círculo rojo indica que hay un punto de interrupción de línea de código en esta línea. DevTools siempre se pausa antes de que se ejecute esta línea de código.

3. Haga clic en el botón Reanudar ejecución de script ():

   

   El script continúa ejecutándose hasta que alcanza la línea 34. En las líneas 31, 32 y 33, DevTools imprime los valores de cada variable a la derecha de los puntos y coma de cada línea. Estos valores son:

   • addend1 = "5"
   • addend2 = "1"
   • sum = "51"

Paso 6: Comprobación de valores de variable

Los valores de addend1, addend2y sum parecen sospechosos. Estos valores se encapsulan entre comillas, lo que significa que cada valor es una cadena. Esta es una buena pista de la causa del error. El siguiente paso es recopilar más información sobre estos valores de variable. DevTools proporciona varias maneras de examinar los valores de variable.

Examen de valores de variable en el 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:

El panel Ámbito también muestra las variables de cierre, según corresponda. Si desea editar un valor de variable, haga doble clic en el valor en el panel Ámbito . Si no se detiene en una línea de código, el panel Ámbito está vacío.

Examen de valores de variable a través de expresiones watch

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

1. Seleccione la pestaña Inspección .

2. Haga clic en Agregar watch expresión ().

3. Escriba la expresión typeof sumwatch y presione Entrar:

El panel Inspección muestra typeof sum: "string". El valor situado a la derecha de los dos puntos es el resultado de la expresión watch. El error se debe a que sum se evalúa como una cadena, cuando debe ser un número.

Si la ventana DevTools es amplia, el panel Inspección se muestra en el panel Depurador , que aparece a la derecha.

Examen de valores de variable a través de la consola

La consola permite ver console.log() la salida. También puede usar la consola para evaluar instrucciones JavaScript arbitrarias mientras el depurador está en 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, presione Esc para abrirla. La herramienta Consola se abre en el panel inferior de la ventana DevTools.

2. En la consola, escriba la expresión parseInt(addend1) + parseInt(addend2). La expresión se evalúa para el ámbito actual, dado que el depurador está en pausa en una línea de código donde addend1 y addend2 están en el ámbito.

3. Presione Entrar. DevTools evalúa la instrucción e imprime 6 en la consola, que es el resultado correcto que espera que la demostración genere:

   

Paso 7: Aplicar una corrección al código devuelto y, a continuación, al código fuente real

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

1. Haga clic en Reanudar ejecución de script ().

2. En el panel Editor , reemplace la línea var sum = addend1 + addend2 por var sum = parseInt(addend1) + parseInt(addend2).

3. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS) para guardar el cambio.

4. Haga clic en Desactivar puntos de interrupción (). El icono del punto de interrupción cambia a gris para indicar que el punto de interrupción está inactivo. Mientras se establece Desactivar puntos de interrupción , DevTools omite los puntos de interrupción establecidos. La página web de demostración ahora muestra el valor correcto:

   

5. Pruebe la demostración con valores diferentes. La demostración ahora se calcula correctamente.

6. Al depurar su propio proyecto, después de identificar la corrección, corregirá el código fuente real en el servidor, por ejemplo, editando el código fuente local y, a continuación, volviendo a implementar el código fijo en el servidor. Los pasos anteriores solo aplican una corrección a una copia local temporal del código que se envía desde el servidor.

Pasos siguientes

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

En este artículo se mostraron dos maneras 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 ciertas condiciones, como:

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

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

Para obtener más información sobre los botones del depurador para recorrer el código paso a paso, vea Paso a paso por línea de código en "Características de depuración de JavaScript".

Ver también

• Características de depuración de JavaScript : uso de 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.

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á creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.