Antes de escribir código más complejo, hablemos de depuración.
La depuración es el proceso de encontrar y corregir errores dentro de un script. Todos los navegadores modernos y la mayoría de los demás entornos admiten herramientas de depuración: una interfaz de usuario especial en las herramientas de desarrollo que facilita mucho la depuración. También permite rastrear el código paso a paso para ver qué está pasando exactamente.
Usaremos Chrome aquí porque tiene suficientes funciones y la mayoría de los demás navegadores tienen un proceso similar.
Su versión de Chrome puede verse un poco diferente, pero aun así debería ser obvio lo que hay allí.
Abra la página de ejemplo en Chrome.
Active las herramientas de desarrollador con F12 (Mac: Cmd + Opt + I ).
Seleccione el panel Sources .
Esto es lo que deberías ver si lo haces por primera vez:
El botón de alternancia abre la pestaña con archivos.
Hagamos clic en él y seleccionemos hello.js en la vista de árbol. Esto es lo que debería aparecer:
El panel Fuentes tiene 3 partes:
El panel Navegador de archivos enumera HTML, JavaScript, CSS y otros archivos, incluidas las imágenes adjuntas a la página. Las extensiones de Chrome también pueden aparecer aquí.
El panel Editor de código muestra el código fuente.
El panel de depuración de JavaScript es para depurar; lo exploraremos pronto.
Ahora puedes hacer clic en el mismo conmutador. nuevamente para ocultar la lista de recursos y darle algo de espacio al código.
Si presionamos Esc , entonces se abre una consola debajo. Podemos escribir comandos allí y presionar Enter para ejecutar.
Después de ejecutar una declaración, su resultado se muestra a continuación.
Por ejemplo, aquí 1+2 da como resultado 3 , mientras que la llamada a la función hello("debugger") no devuelve nada, por lo que el resultado no está undefined :
Examinemos lo que sucede dentro del código de la página de ejemplo. En hello.js , haga clic en la línea número 4 . Sí, justo en los 4 dígitos, no en el código.
¡Felicidades! Has establecido un punto de interrupción. Haga clic también en el número de la línea 8 .
Debería verse así (en azul es donde debes hacer clic):
Un punto de interrupción es un punto de código donde el depurador pausará automáticamente la ejecución de JavaScript.
Mientras el código está en pausa, podemos examinar las variables actuales, ejecutar comandos en la consola, etc. En otras palabras, podemos depurarlo.
Siempre podemos encontrar una lista de puntos de interrupción en el panel derecho. Esto es útil cuando tenemos muchos puntos de interrupción en varios archivos. Nos permite:
Salte rápidamente al punto de interrupción en el código (haciendo clic en él en el panel derecho).
Deshabilite temporalmente el punto de interrupción desmarcándolo.
Elimine el punto de interrupción haciendo clic derecho y seleccionando Eliminar.
…Etcétera.
Puntos de interrupción condicionales
Hacer clic derecho en el número de línea permite crear un punto de interrupción condicional . Sólo se activa cuando la expresión dada, que debes proporcionar cuando la creas, es verdadera.
Esto es útil cuando necesitamos detenernos solo para un determinado valor de variable o para ciertos parámetros de función.
También podemos pausar el código usando el comando debugger , así:
función hola(nombre) {
let frase = `¡Hola, ${nombre}!`;
depurador; // <-- el depurador se detiene aquí
decir(frase);
}Este comando sólo funciona cuando las herramientas de desarrollo están abiertas; de lo contrario, el navegador lo ignora.
En nuestro ejemplo, se llama hello() durante la carga de la página, por lo que la forma más sencilla de activar el depurador (después de haber establecido los puntos de interrupción) es recargar la página. Entonces, presionemos F5 (Windows, Linux) o Cmd + R (Mac).
Cuando se establece el punto de interrupción, la ejecución se detiene en la cuarta línea:
Abra los menús desplegables informativos a la derecha (etiquetados con flechas). Le permiten examinar el estado actual del código:
Watch : muestra los valores actuales de cualquier expresión.
Puede hacer clic en el signo más + e ingresar una expresión. El depurador mostrará su valor y lo recalculará automáticamente en el proceso de ejecución.
Call Stack : muestra la cadena de llamadas anidadas.
En este momento, el depurador está dentro de la llamada hello() , invocado por un script en index.html (no hay función allí, por lo que se llama "anónimo").
Si hace clic en un elemento de la pila (por ejemplo, "anónimo"), el depurador salta al código correspondiente y también se pueden examinar todas sus variables.
Scope – variables actuales.
Local muestra variables de funciones locales. También puede ver sus valores resaltados justo encima de la fuente.
Global tiene variables globales (fuera de cualquier función).
También existe this palabra clave que aún no hemos estudiado, pero lo haremos pronto.
Ahora es el momento de rastrear el guión.
Hay botones para ello en la parte superior del panel derecho. Involucremoslos.
– “Reanudar”: continúa la ejecución, tecla de acceso rápido F8 .
Reanuda la ejecución. Si no hay puntos de interrupción adicionales, la ejecución simplemente continúa y el depurador pierde el control.
Esto es lo que podemos ver después de hacer clic en él:
La ejecución se reanudó, alcanzó otro punto de interrupción dentro de say() y se detuvo allí. Eche un vistazo a la "Pila de llamadas" a la derecha. Ha aumentado en una convocatoria más. Estamos dentro de say() ahora.
– “Paso”: ejecute el siguiente comando, tecla de acceso rápido F9 .
Ejecute la siguiente declaración. Si hacemos clic en él ahora, se mostrará alert .
Al hacer clic aquí una y otra vez, se recorrerán todas las declaraciones del guión una por una.
– “Paso por encima”: ejecute el siguiente comando, pero no entre en una función , tecla de acceso rápido F10 .
Similar al comando "Paso" anterior, pero se comporta de manera diferente si la siguiente declaración es una llamada de función (no una función incorporada, como alert , sino una función propia).
Si los comparamos, el comando "Step" entra en una llamada a función anidada y pausa la ejecución en su primera línea, mientras que "Step over" ejecuta la llamada a función anidada de forma invisible para nosotros, omitiendo los aspectos internos de la función.
Luego, la ejecución se pausa inmediatamente después de esa llamada a la función.
Eso es bueno si no estamos interesados en ver qué sucede dentro de la llamada a la función.
– “Entrar”, tecla de acceso rápido F11 .
Es similar a "Paso", pero se comporta de manera diferente en caso de llamadas a funciones asincrónicas. Si recién estás comenzando a aprender JavaScript, puedes ignorar la diferencia, ya que todavía no tenemos llamadas asincrónicas.
Para el futuro, solo tenga en cuenta que el comando "Paso" ignora las acciones asíncronas, como setTimeout (llamada a función programada), que se ejecutan más tarde. El "Paso a" entra en su código, esperándolos si es necesario. Consulte el manual de DevTools para obtener más detalles.
– “Salir”: continúa la ejecución hasta el final de la función actual, tecla de acceso rápido Shift + F11 .
Continúe la ejecución y deténgala en la última línea de la función actual. Esto es útil cuando ingresamos accidentalmente una llamada anidada usando , pero no nos interesa, y queremos continuar hasta su final lo antes posible.
– habilitar/deshabilitar todos los puntos de interrupción.
Ese botón no mueve la ejecución. Sólo un encendido/apagado masivo para los puntos de interrupción.
– habilitar/deshabilitar la pausa automática en caso de error.
Cuando está habilitado, si las herramientas de desarrollador están abiertas, un error durante la ejecución del script lo pausa automáticamente. Luego podemos analizar variables en el depurador para ver qué salió mal. Entonces, si nuestro script muere con un error, podemos abrir el depurador, habilitar esta opción y recargar la página para ver dónde muere y cuál es el contexto en ese momento.
Continuar hasta aquí
Al hacer clic derecho en una línea de código, se abre el menú contextual con una excelente opción llamada "Continuar hasta aquí".
Esto es útil cuando queremos avanzar varios pasos hacia la línea, pero somos demasiado vagos para establecer un punto de interrupción.
Para enviar algo a la consola desde nuestro código, existe la función console.log .
Por ejemplo, esto genera valores de 0 a 4 a la consola:
//abre la consola para ver
para (sea i = 0; i < 5; i++) {
console.log("valor", i);
}Los usuarios habituales no ven ese resultado, está en la consola. Para verlo, abra el panel Consola de herramientas de desarrollador o presione Esc mientras está en otro panel: eso abre la consola en la parte inferior.
Si tenemos suficientes registros en nuestro código, entonces podremos ver qué sucede en los registros, sin el depurador.
Como podemos ver, existen tres formas principales de pausar un script:
Un punto de quiebre.
Las declaraciones debugger .
Un error (si las herramientas de desarrollo están abiertas y el botón está “encendido”).
Cuando está en pausa, podemos depurar: examinar variables y rastrear el código para ver dónde sale mal la ejecución.
Hay muchas más opciones en las herramientas para desarrolladores de las que se tratan aquí. El manual completo está en https://developers.google.com/web/tools/chrome-devtools.
La información de este capítulo es suficiente para comenzar la depuración, pero más adelante, especialmente si realiza muchas tareas con el navegador, vaya allí y consulte las capacidades más avanzadas de las herramientas de desarrollo.
Ah, y también puedes hacer clic en varios lugares de las herramientas de desarrollo y simplemente ver lo que aparece. Esa es probablemente la ruta más rápida para aprender herramientas de desarrollo. ¡No te olvides del clic derecho y los menús contextuales!