Depuración en el navegador
Antes de embarcarnos en escribir código más complejo, es esencial comprender el proceso de depuración.
Todos los navegadores modernos y la mayoría de otros entornos admiten herramientas de depuración: una interfaz especial que ayuda a encontrar y solucionar errores con mayor facilidad.
Utilizaremos Chrome como ejemplo, ya que es uno de los navegadores que ofrece las mejores herramientas para este propósito.
Panel de «sources»
El aspecto de tu versión de Chrome puede variar, pero los conceptos son los mismos.
- Abre una página de ejemplo en Chrome.
- Activa las herramientas de desarrollo con F12 (Mac: Cmd+Opt+I).
- Selecciona el panel «sources».
Esto es lo que deberías ver si es tu primera vez utilizando esta herramienta:
El botón de activación abre la pestaña con los archivos.
Haz clic en él y selecciona index.html y luego hello.js en el árbol de archivos. Debería verse así:
Podemos distinguir tres zonas:
- Zona de archivos: Lista los archivos HTML, JavaScript, CSS y otros recursos, incluidas imágenes. A veces también aparecen las extensiones de Chrome.
- Zona de código: Muestra el código fuente de los archivos.
- Zona de información y control: Aquí es donde realizaremos la depuración.
Puedes volver a hacer clic en el botón de activación para ocultar la lista de archivos y tener más espacio para trabajar.
Consola
Si presionas Esc, la consola se abrirá en la parte inferior. Aquí puedes escribir comandos y presionar Enter para ejecutarlos.
Después de ejecutar un comando, el resultado se muestra debajo.
Por ejemplo, 1+2 mostrará 3, mientras que la llamada a hello("debugger") no devuelve nada, por lo que el resultado es undefined:
Puntos de interrupción (Breakpoints)
Veamos qué sucede con el código de la página de ejemplo. En hello.js, haz clic en el número de línea 4. Sí, en el número 4, no en el código.
¡Felicidades! Has configurado un punto de interrupción. También haz clic en el número de línea 8.
Debería verse así:
Un punto de interrupción es un punto en el código donde el depurador detendrá automáticamente la ejecución de JavaScript.
Mientras el código está pausado, podemos examinar las variables actuales, ejecutar comandos en la consola, etc. En otras palabras, podemos depurar.
Siempre podemos encontrar una lista de los puntos de interrupción en el panel derecho. Esto es útil cuando tenemos muchos puntos de interrupción en varios archivos. Nos permite:
- Saltar rápidamente al punto de interrupción en el código (haciendo clic en él dentro del panel).
- Desactivar temporalmente el punto de interrupción desmarcándolo.
- Eliminar el punto de interrupción haciendo clic derecho y seleccionando eliminar.
Puntos de interrupción condicionales
Haciendo clic derecho en el número de línea nos permite crear un punto de interrupción condicional. Solo se activará cuando la expresión dada sea verdadera.
Esto es útil cuando necesitamos detener la ejecución para un determinado valor de las variables o parámetros de función.
Comando debugger
También podemos pausar el código utilizando el comando debugger, así:
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- el depurador se detendrá aquí
say(phrase);
}
Este comando solo funciona cuando el panel de herramientas de desarrollo está abierto, de lo contrario, el navegador lo ignora.
Pausar y examinar
En nuestro ejemplo, hello() se llama durante la carga de la página, así que la forma más fácil de activar el depurador es recargando la página. Presiona F5 (en Windows o Linux) o Cmd+R (en Mac).
Con el punto de interrupción definido, la ejecución se detiene en la línea 4:
Por favor abre el panel de información a la derecha (etiquetado con flechas). Esto nos permite examinar el estado del código actual:
Watch: Muestra el valor actual de cualquier expresión.
Puedes hacer clic en el signo + y agregar una expresión. El depurador mostrará su valor y se recalculará automáticamente durante la ejecución.
Call Stack: Muestra las llamadas anidadas.
En el momento actual, el depurador está dentro de la función
hello(), llamada por un script enindex.html(no dentro de ninguna función, por lo que se llama «anonymous»).Si haces clic en un elemento de la pila (por ejemplo, «anonymous»), el depurador saltará al código correspondiente y podrás examinar todas sus variables.
Scope: Muestra las variables activas.
Localmuestra las variables de la función local. También puedes ver sus valores resaltados en el código fuente.Globalcontiene las variables globales (fuera de cualquier función).También tenemos la palabra
this, la cual no estudiaremos ahora, pero pronto lo haremos.
Seguimiento de la ejecución
Ahora es momento de seguir el script.
Hay botones para esto en el panel superior derecho. Revisémoslos.
Reanudar (hotkey F8): Continúa la ejecución. Si no hay más puntos de interrupción, la ejecución sigue y el depurador pierde el control.
Esto es lo que verás al hacer clic:
La ejecución continuó hasta el siguiente punto de interrupción dentro de
say()y se detuvo allí. Revisa la «Call stack» a la derecha. Ha incrementado su valor en una llamada. Ahora estamos dentro desay().Siguiente paso (hotkey F9): Ejecuta el siguiente comando.
Ejecuta la siguiente sentencia. Si haces clic ahora, se mostrará
alert.Otro clic ejecutará el siguiente comando, y así sucesivamente, a través de todo el script.
Saltar paso (hotkey F10): Similar a «siguiente paso», pero no entra en la función, ejecutándola de forma invisible.
Es útil si no estamos interesados en ver lo que pasa dentro de la función llamada.
Siguiente paso asincrónico (hotkey F11): Similar a «siguiente», pero se comporta diferente en las llamadas asincrónicas.
Si apenas comienzas en JavaScript, puedes ignorar esto por ahora.
Salir de la función (hotkey Shift+F11): Continúa la ejecución hasta el final de la función actual.
La ejecución se detendrá en la última línea de la función actual. Esto es útil cuando accidentalmente entramos en una llamada anidada y queremos continuar hasta el final lo más rápido posible.
Activar/desactivar todos los puntos de interrupción: Este botón no mueve la ejecución. Solo prende y apaga los puntos de interrupción.
Activar/desactivar pausa automática en caso de error: Cuando está activo y las herramientas de desarrollo están abiertas, un error de script pausa automáticamente la ejecución. Esto nos permite analizar las variables para ver qué está mal.
Continuar hasta aquí
Haciendo clic derecho en una línea de código abre el menú contextual con la opción «Continuar hasta aquí».
Esto es útil cuando queremos avanzar varios pasos adelante sin definir un punto de interrupción.
Registro (Logging)
Para escribir algo en la consola, utilizamos console.log.
Por ejemplo, esto muestra los valores desde 0 hasta 4 en la consola:
for (let i = 0; i < 5; i++) {
console.log("valor:", i);
}
Los usuarios regulares no ven esta salida, ya que está en la consola. Para verla, debemos abrir la consola de desarrolladores y presionar Esc.
Si tenemos suficiente registro en nuestro código, podemos ver lo que está pasando sin el depurador.
Resumen
Hemos cubierto tres formas principales de pausar un script:
- Un punto de interrupción.
- La declaración
debugger. - Un error (si la consola está abierta y la opción correspondiente está activada).
Cuando el script está pausado, podemos depurar: examinar variables y seguir el código para identificar problemas.
Hay muchas más opciones en las herramientas de desarrollo de lo que hemos cubierto aquí. El manual completo está disponible en https://developers.google.com/web/tools/chrome-devtools.
Esta información es suficiente para comenzar con la depuración, pero si haces mucho trabajo en el navegador, te recomendamos explorar las capacidades avanzadas de las herramientas de desarrollo.
No dudes en hacer clic en todo lo que veas en la consola para aprender más rápido. ¡Y recuerda el clic derecho!
