Cómo depurar JavaScript

Kayce Basques

Sofia Emelianova

En este instructivo, aprenderás el flujo de trabajo básico para depurar cualquier problema de JavaScript en Herramientas para desarrolladores. Leído o mira la versión en video de este instructivo.

Reproduce el error.

El primer paso es siempre encontrar una serie de acciones que reproduzcan un error de manera coherente. la depuración.

1. Abre esta demostración en una pestaña nueva.
2. Ingresa 5 en el cuadro Número 1.
3. Ingresa 1 en el cuadro Número 2.
4. Haz clic en Agregar número 1 y número 2. La etiqueta debajo del botón dice 5 + 1 = 51. El resultado debe ser 6. Este es el error que vas a corregir.

En este ejemplo, el resultado de 5 + 1 es 51. Debería ser 6.

Familiarízate con la IU del panel de fuentes

Herramientas para desarrolladores ofrece muchas herramientas para diferentes tareas, como cambiar CSS y generar perfiles de página. rendimiento de carga y supervisión de las solicitudes de red. El panel Sources es donde depuras JavaScript:

1. Abre Herramientas para desarrolladores y navega al panel Fuentes.

   

El panel Fuentes tiene tres secciones:

1. La pestaña Página con el árbol de archivos. Aquí se enumeran todos los archivos que solicita la página.
2. La sección Code Editor. Después de seleccionar un archivo en la pestaña Página, el contenido de ese archivo se muestran aquí.

3. La sección Debugger. Diversas herramientas para inspeccionar el JavaScript de la página

   Si la ventana de Herramientas para desarrolladores es ancha, de forma predeterminada, el Depurador se encuentra a la derecha del Editor de código. En este caso, las pestañas Alcance y Reloj unen Breakpoints, Call stack y otras como secciones que se pueden contraer.

Pausa el código con un punto de interrupción

Un método común para depurar un problema como este es insertar muchas sentencias console.log(). en el código para inspeccionar los valores a medida que se ejecuta la secuencia de comandos. 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 método console.log() puede hacer el trabajo, pero los puntos de interrupción pueden hacerlo más rápido. R el punto de interrupción te permite pausar el código en la mitad de la ejecución y examinar todos los valores en ese en un momento dado. Los puntos de interrupción tienen algunas ventajas sobre el método console.log():

• Con console.log(), debes abrir manualmente el código fuente, encontrar el código relevante e insertarlo las sentencias console.log() y, luego, vuelve a cargar la página para ver los mensajes en el de Cloud. Con los puntos de interrupción, puedes hacer una pausa en el código relevante sin siquiera saber cómo se estructurados.
• En tus sentencias console.log(), debes especificar explícitamente cada valor que deseas. inspeccionar. Con los puntos de interrupción, Herramientas para desarrolladores te muestra los valores de todas las variables en ese momento. A veces hay variables que afectan tu código y que ni siquiera sabes que existen.

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

Si retrocedes un poco y piensas en cómo funciona la aplicación, puedes hacer una suposición fundamentada de que se calcula la suma incorrecta (5 + 1 = 51) en el objeto de escucha de eventos click asociado al Botón Agregar los números 1 y 2. Por lo tanto, te recomendamos que detengas el código cerca del momento que ejecuta el objeto de escucha click. Los Puntos de interrupción del objeto de escucha de eventos te permiten hacer exactamente eso:

1. En la sección Debugger, haz clic en Event Listener Breakpoints para expandir sección. Herramientas para desarrolladores muestra una lista de categorías de eventos expandibles, como Animation y Portapapeles.
2. Junto a la categoría del evento Mouse, haz clic en arrow_right Expandir. Herramientas para desarrolladores muestra una lista de eventos del mouse, como click y mousedown. Cada evento tiene una casilla de verificación junto a él.

3. Marca la casilla de verificación click. Herramientas para desarrolladores ahora está configurado para pausarse automáticamente cuando cualquier click se ejecuta el objeto de escucha de eventos.

   

4. Vuelve a la demostración y vuelve a hacer clic en Agregar número 1 y número 2. Herramientas para desarrolladores pausa la demostración y destaca una línea de código en el panel Sources. Las Herramientas para desarrolladores deben pausarse en esta línea de código:

   function onClick() {
   

   Si está detenido en una línea de código diferente, presiona Reanudar la ejecución de la secuencia de comandos hasta que te detengas en la línea correcta.

Los puntos de interrupción del objeto de escucha de eventos son solo uno de los muchos tipos de puntos de interrupción disponibles en Herramientas para desarrolladores. Es vale la pena explorar todos los diferentes tipos, porque cada uno, en última instancia, te ayuda a depurar diferentes en situaciones hipotéticas lo más rápido posible. Consulta Cómo pausar el código con puntos de interrupción para saber cuándo y cómo utilizar cada tipo.

Repasa el código

Una causa común de errores es que la secuencia de comandos se ejecute en el orden incorrecto. Recorre tu código te permite recorrer la ejecución del código, línea a la vez, y descubrir exactamente dónde se ejecuta en un orden diferente del que esperabas. Probar ahora:

1. En el panel Sources de Herramientas para desarrolladores, haz clic en step_into Step into next function call para revisar la ejecución de la función onClick(), línea a la vez. Herramientas para desarrolladores destaca la siguiente línea de código:

   if (inputsAreEmpty()) {
   

2. Haz clic en step_over Step over next function call.

   Las Herramientas para desarrolladores ejecuta inputsAreEmpty() sin recorrerla. Observa que Herramientas para desarrolladores omite algunas líneas de código. Esto se debe a que inputsAreEmpty() se evaluó como falso, por lo que el bloque de la sentencia if no se ejecutó el código.

Esa es la idea básica de recorrer el código. Si observas el código de get-started.js, puedes Observa que el error probablemente esté en algún lugar de la función updateLabel(). En lugar de recorrer en cada línea de código, puedes usar otro tipo de punto de interrupción para pausar el código más cerca del la ubicación del error.

Cómo 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 tienes una línea específica de código en el que quieras pausar, usa un punto de interrupción de línea de código:

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

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

2. A la izquierda del código, puedes ver el número de línea de esta línea de código en particular, que es 32 Haz clic en 32. Herramientas para desarrolladores coloca un ícono azul en la parte superior de 32. Esto significa que hay un punto de interrupción de línea de código en esta línea. Ahora Herramientas para desarrolladores siempre se detiene antes de que se cambie esta línea de código ejecutado.

3. Haz clic en Reanudar Reanudar ejecución de la secuencia de comandos. El se sigue ejecutando hasta llegar a la línea 32. En las líneas 29, 30 y 31, las Herramientas para desarrolladores muestran los valores de addend1, addend2 y sum intercalados junto a sus declaraciones.

En este ejemplo, Herramientas para desarrolladores hace una pausa en el punto de interrupción de línea de código en la línea 32.

Verifica los valores de las variables

Los valores de addend1, addend2 y sum parecen sospechosos. Están entre comillas, significa que son cadenas. Esta es una buena hipótesis para explicar la causa del error. Ahora es momento de recopilar más información. Herramientas para desarrolladores ofrece muchas herramientas para examinar variables de salida.

Método 1: Inspecciona el alcance

Cuando tu campaña se detiene en una línea de código, la pestaña Alcance te muestra las variables locales y globales. se definen en este punto de la ejecución, junto con el valor de cada variable. También muestra las variables de cierre, cuando que corresponda. Cuando no se detiene en una línea de código, la pestaña Alcance está vacía.

Haz doble clic en el valor de una variable para editarlo.

Método 2: Expresiones de observación

La pestaña Mirar te permite supervisar los valores de las variables a lo largo del tiempo. Watch no se limita solo a las variables. Puedes almacenar cualquier código JavaScript válido expresión en la pestaña Watch.

Probar ahora:

1. Haz clic en la pestaña Mirar.
2. Haz clic en add Add watch expression.
3. Tipo typeof sum.
4. Presiona Intro. Herramientas para desarrolladores muestra typeof sum: "string". El valor a la derecha de los dos puntos es el resultado de tu expresión.

En esta captura de pantalla, se muestra la pestaña Mirar (en la parte inferior derecha) después de crear el reloj typeof sum. expresión.

Como sospechaba, sum se evalúa como una cadena, cuando debería ser un número. Ya confirmaste que esta es la causa del error.

Método 3: La consola

Además de ver los mensajes de console.log(), también puedes usar la consola para evaluar los Instrucciones de JavaScript. En términos de depuración, puedes usar la consola para probar correcciones potenciales. en busca de insectos. Probar ahora:

1. Si el panel lateral de la consola no está abierto, presiona Escape para abrirlo. Se abre en la parte inferior de la ventana de Herramientas para desarrolladores.
2. En la consola, escribe parseInt(addend1) + parseInt(addend2). Esta afirmación funciona porque estén detenidos en una línea de código en la que addend1 y addend2 están dentro del alcance.
3. Presiona Intro. Herramientas para desarrolladores evalúa la sentencia y, luego, imprime 6, que es el resultado que esperas. que producirá la demostración.

En esta captura de pantalla, se muestra el panel lateral Console después de evaluar parseInt(addend1) + parseInt(addend2).

Aplicar una corrección

Encontraste una solución para el error. Solo falta probar la solución. Para ello, edita el código y volver a ejecutar la demostración. No es necesario que salgas de Herramientas para desarrolladores para aplicar la solución. Puedes editar el código JavaScript directamente en la IU de Herramientas para desarrolladores. Probar ahora:

1. Haz clic en Reanudar Reanudar ejecución de la secuencia de comandos.
2. En el editor de código, reemplaza la línea 31, var sum = addend1 + addend2, por var sum = parseInt(addend1) + parseInt(addend2)
3. Presiona Comando + S (Mac) o Control + S (Windows y Linux) para guardar los cambios.
4. Haz clic en label_off Desactivar puntos de interrupción. Su color cambiará a azul para indicar que está activo. Mientras esté configurado, las Herramientas para desarrolladores ignorarán todos los puntos de interrupción que estableciste.
5. Prueba la demostración con diferentes valores. Ahora, la demostración realiza los cálculos correctamente.

Próximos pasos

En este instructivo, solo se mostraron dos formas de establecer puntos de interrupción. Herramientas para desarrolladores ofrece muchas otras formas, como:

• Puntos de interrupción condicionales que solo se activan cuando la condición que proporcionas es verdadera
• Puntos de interrupción en excepciones detectadas y no detectadas
• Puntos de interrupción XHR que se activan cuando la URL solicitada coincide con una subcadena que proporciones

Consulta Cómo pausar el código con puntos de interrupción para saber cuándo y cómo usar cada tipo.

Hay un par de controles para recorrer el código que no se explicaron en este instructivo. Consulta Pasar línea de código para obtener más información.