Este tutorial le enseña el flujo de trabajo básico para depurar cualquier problema de JavaScript en DevTools. Siga leyendo, o vea la versión en video de este tutorial, a continuación.

# Paso 1: Reproducir el error

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

1. Haga clic en Abrir Demo. La demo se abre en una nueva pestaña.

   Demostración abierta

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

3. Introduzca 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 dice 5 + 1 = 51. El resultado debe ser 6. Este es el error que vas a arreglar.

   

   Figura 1. El resultado de 5 + 1 es 51. Deberían ser las 6.

# Paso 2: Familiarícese con la interfaz de usuario del panel de fuentes

DevTools proporciona muchas herramientas diferentes para diferentes tareas, como cambiar CSS, crear perfiles de rendimiento de carga de páginas y supervisar solicitudes de red. El panel Fuentes es donde depura JavaScript.

1. Abra DevTools pulsando Comando + Opción + I (Mac) o Control+Mayús+I (Windows, Linux). Este acceso directo abre el panel de consola.

   

   Figura 2. El panel de consola

2. Haga clic en la ficha Fuentes.

   

   Figura 3. El panel Fuentes

La interfaz de usuario del panel de fuentes tiene 3 partes:

Figura 4. Las 3 partes de la interfaz de usuario del panel Fuentes

1. El panel Navegador de archivos. Todos los archivos que solicita la página se enumeran aquí.
2. El panel Editor de código. Después de seleccionar un archivo en el panel Navegador de archivos, el contenido de ese archivo se muestra aquí.
3. El panel de depuración de JavaScript. Varias herramientas para inspeccionar el JavaScript de la página. Si la ventana de DevTools es amplia, este panel se muestra a la derecha del panel Editor de código.

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

Un método común para depurar un problema como este es insertar muchas instrucciones console.log() en el código, para 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 método console.log() puede hacer el trabajo, pero los puntos de interrupción pueden hacerlo más rápido. Un punto de interrupción le permite pausar el código en medio de su ejecución y examinar todos los valores en ese momento. Los puntos de interrupción tienen algunas ventajas sobre el método console.log() :

• Con console.log(), debe abrir manualmente el código fuente, encontrar el código relevante, insertar las instrucciones console.log() y, a continuación, volver a cargar la página para ver los mensajes en la consola. Con los puntos de interrupción, puede pausar el código relevante sin siquiera saber cómo está estructurado el código.
• En las instrucciones console.log() debe especificar explícitamente cada valor que desea inspeccionar. Con los puntos de interrupción, DevTools muestra los valores de todas las variables en ese momento. A veces hay variables que afectan a tu código de las que ni siquiera eres consciente.

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

Si das un paso atrás y piensas en cómo funciona la aplicación, puedes adivinar que la suma incorrecta (5 + 1 = 51) se calcula en el receptor de eventos click asociado a los botones Agregar Número 1 y Número 2. Por lo tanto, es probable que desee pausar el código alrededor del momento en que se ejecuta el oyente click. Los puntos de interrupción del receptor de eventos te permiten hacer exactamente eso:

1. En el panel Depuración de JavaScript, haga clic en Puntos de interrupción del receptor de eventos para expandir la sección. DevTools muestra una lista de categorías de eventos ampliables, como Animación y Portapapeles.

2. Junto a la categoría de evento del ratón, haga clic en Expandir . DevTools revela una lista de eventos del ratón, como clic y descenso del ratón. Cada evento tiene una casilla de verificación al lado.

3. Marque la casilla de verificación clic. DevTools ahora está configurado para pausar automáticamente cuando se ejecuta cualquier receptor de eventos click.

   

   Figura 5. La casilla de verificación clic está habilitada

4. De vuelta en la demo, haga clic en Agregar número 1 y Número 2 de nuevo. DevTools detiene la demostración y resalta una línea de código en el panel Fuentes. Las herramientas de desarrollo deben estar pausadas en esta línea de código:

   function onClick() {

   Si está en pausa en una línea de código diferente, presione Reanudar ejecución de script hasta que esté en pausa en la línea correcta.

   Nota: Si hizo una pausa en una línea diferente, tiene una extensión de navegador que registra un receptor de eventos click en cada página que visita. Estabas en pausa en el oyente click de la extensión. Si usas el modo de incógnito para navegar en privado, que deshabilita todas las extensiones, puedes ver que pausas en la línea de código correcta cada vez.

Los puntos de interrupción del receptor de eventos son solo uno de los muchos tipos de puntos de interrupción disponibles en DevTools. Vale la pena memorizar todos los tipos diferentes, porque cada tipo en última instancia lo ayuda a depurar diferentes escenarios lo más rápido posible. Consulte Pausar el código con puntos de interrupción para saber cuándo y cómo usar cada tipo.

# Paso 4: Paso a través del código

Una causa común de errores es cuando un script se ejecuta en el orden incorrecto. Pasar a través de su código le permite recorrer la ejecución de su código, una línea a la vez, y averiguar exactamente dónde se está ejecutando en un orden diferente al esperado. Pruébalo ahora:

1. En el panel Fuentes de DevTools, haga clic en Pasar a la siguiente llamada a la función para pasar a la ejecución de la función onClick(), una línea a la vez. DevTools resalta la siguiente línea de código:

   if (inputsAreEmpty()) {

2. Haga clic en Paso sobre la siguiente llamada de función . DevTools ejecuta inputsAreEmpty() sin entrar en él. Observe cómo DevTools se salta algunas líneas de código. Esto se debe a que inputsAreEmpty() se evaluó como false, por lo que el bloque de código de la instrucción if no se ejecutó.

Esa es la idea básica de atravesar el código. Si observa el código en get-started.js, puede ver que el error probablemente esté en algún lugar de la función updateLabel(). En lugar de atravesar cada línea 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 de punto de interrupción más común. Cuando tengas una línea de código específica en la que quieras pausar, utiliza un punto de interrupción de línea de código:

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

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

2. A la izquierda del código se puede ver el número de línea de esta línea de código en particular, que es 32. Haga clic en 32. DevTools pone un icono azul encima de 32. Esto significa que hay un punto de interrupción de línea de código en esta línea. DevTools ahora siempre hace una pausa antes de que se ejecute esta línea de código.

3. Haga clic en Reanudar ejecución de script . El script continúa ejecutándose hasta llegar a la línea 32. En las líneas 29, 30 y 31, DevTools imprime los valores de addend1, addend2 y sum a la derecha del punto y coma de cada línea.

   

   Figura 6. DevTools se detiene en el punto de interrupción de línea de código en línea 32

# Paso 6: Compruebe que los valores de las variables

Los valores de addend1, addend2 y sum parecen sospechosos. Están envueltas en comillas, lo que significa que son cuerdas. Esta es una buena hipótesis para explicar la causa del error. Ahora es el momento de reunir más información. DevTools proporciona una gran cantidad de herramientas para examinar valores de variables.

# Método 1: El panel de ámbito

Cuando está en pausa en una línea de código, el panel de ámbito le muestra qué variables locales y globales están definidas actualmente, junto con el valor de cada variable. También muestra las variables de cierre, cuando corresponde. Haga doble clic en un valor de variable para editarlo. Cuando no está en pausa en una línea de código, el panel Ámbito está vacío.

Figura 7. El panel Ámbito

# Método 2: Expresiones de observación

La pestaña Expresiones de observación le permite supervisar los valores de las variables a lo largo del tiempo. Como su nombre indica, las expresiones de observación no se limitan solo a variables. Puede almacenar cualquier expresión de JavaScript válida en una expresión de reloj. Pruébalo ahora:

1. Haz clic en la pestaña Reloj.

2. Haga clic en Agregar expresión .

3. Tipo typeof sum.

4. Pulse Intro. DevTools muestra typeof sum: "string". El valor a la derecha de los dos puntos es el resultado de la Expresión de su reloj.

   

   Figura 8. El panel de Expresión de reloj (abajo a la derecha), después de crear la expresión de reloj typeof sum. Si la ventana de Herramientas de desarrollo es grande, el panel de Expresiones de observación está a la derecha, encima del panel de puntos de interrupción del receptor de eventos.

Como se sospecha, sum se está evaluando como una cadena, cuando debería ser un número. Ahora ha confirmado que esta es la causa del error.

# Método 3: La consola

Además de ver mensajes console.log(), también puede usar la Consola para evaluar instrucciones JavaScript arbitrarias. En términos de depuración, puede usar la Consola para probar posibles correcciones de errores. Pruébalo ahora:

1. Si no tiene el cajón de la consola abierto, presione Escape para abrirlo. Se abre en la parte inferior de la ventana de DevTools.

2. En la Consola, escriba parseInt(addend1) + parseInt(addend2). Esta instrucción funciona porque está en pausa en una línea de código donde addend1 y addend2 están en el alcance.

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

   

   Figura 9. El cajón de la consola, después de evaluar parseInt(addend1) + parseInt(addend2).

# Paso 7: Aplique una corrección

Ha encontrado una corrección para el error. Todo lo que queda es probar su corrección editando el código y volviendo a ejecutar la demostración. No es necesario dejar DevTools para aplicar la solución. Puede editar código JavaScript directamente en la interfaz de usuario de DevTools. Pruébalo ahora:

1. Haga clic en Reanudar ejecución de script .
2. En el Editor de código, reemplace la línea 31, var sum = addend1 + addend2, por var sum = parseInt(addend1) + parseInt(addend2).
3. Pulse Comando + S (Mac) o Control+S (Windows, Linux) para guardar el cambio.
4. Haga clic en Desactivar puntos de interrupción . Cambia de azul para indicar que está activo. Mientras está configurado, DevTools ignora cualquier punto de interrupción que haya establecido.
5. Pruebe la demo con diferentes valores. La demo ahora calcula correctamente.

¡Felicitaciones! Ahora sabes cómo aprovechar al máximo las herramientas de desarrollo de Chrome al depurar JavaScript. Las herramientas y métodos que aprendiste en este tutorial pueden ahorrarte incontables horas.

Este tutorial solo le mostró dos formas de establecer puntos de interrupción. DevTools ofrece muchas otras formas, incluyendo:

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

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

Hay un par de controles de pasos de código que no se explicaron en este tutorial. Consulte Paso por encima de la línea de código para obtener más información.