Keep Calm and Debug in JS
En este post veremos acerca de depuración en JavaScript, pero antes de ahondar en el tema, entendamos ¿qué es debugging?.
¿Qué es debugging (depuración en español) y porqué es importante?
Debugging es un proceso de identificación y resolución de errores (bugs). ¿A veces te has encontrado con la situación de realizar todo el código de un proyecto o script, luego lo pruebas y te das cuenta de que no funciona como esperabas? El paso siguiente, es volver a tu código y buscar la línea en la que puede estar fallando, ¿cierto? Pues, dicho proceso es considerado “depuración”, encontrar ¿cuál es el error?, ¿porqué falla?, ¿cómo fue que falló?, ¿estará afectando otra parte del código?.
Y su importancia, ya vista implícitamente, es que nos permite identificar errores para ser solucionados, además de no ser víctimas de memes como:
Tipos de Errores
Cuando hablamos de depuración, estamos hablando de errores y cuando programamos es muy probable que ocurran 2 tipos de errores: errores de sintaxis y errores lógicos.
Un error de sintaxis se produce al escribir, incorrectamente, alguna parte del código fuente de un programa. De forma que, dicho error impedirá, tanto al compilador como al intérprete, traducir dicha instrucción, ya que, ninguno de los dos entenderá qué le está diciendo el programador. — Wikipedia
Los errores lógicos son errores que impiden que su programa haga lo que estaba previsto. Su código puede compilarse y ejecutarse sin errores, pero el resultado de una operación puede generar un resultado no esperado. — Microsoft Developer Network
¿Cómo debuggear en JS?
Para depurar en JavaScript podemos hacer uso de 2 herramientas: DevTools del navegador y el debugger statement.
DevTools
El DevTools (así se llama en Chrome pero existe lo mismo en otros navegadores) es una herramienta usada para la inspección y depuración de todo lo que ocurre en nuestra aplicación web.
Para acceder a ella existen diversos métodos, uno de los más sencillos es abrir la web app que deseas depurar, dar clic derecho en cualquier parte de dicha página y seleccionar la opción Inspect o Inspeccionar.
Por defecto, abrirá en una pestaña llamada Elements o Elementos; sin embargo, para hacer debug de nuestro código JavaScript debemos de cambiar a la pestaña Sources o Fuente.
Probablemente, al ver el contenido de la pestaña Sources, solo verás un archivo HTML y ningún archivo JS por más que sepamos que si se está usando. Para poder visualizar los archivos JS que usa nuestra web app, solo es necesario recargar la página.
¿No te quedó claro lo anterior? No te preocupes, a continuación verás un GIF en el cual muestra todo lo mencionado anteriormente.
Para la depuración del código JS, podemos hacer uso de breakpoints, que son puntos donde queremos que nuestro código se detenga en tiempo de ejecución.
En el siguiente ejemplo, tenemos un código que verifica si el número ingresado por un usuario es cero, positivo o negativo.
Para poner un breakpoint en el DevTools solo tienes que dar clic en el número que indica la línea de código donde queremos detener el script. Una vez puesto el breakpoint debemos de recargar la página para que se detenga donde le indicamos.
Una vez detenido, la línea de código donde pusimos el breakpoint se sombreará, mientras que la web se pondrá opaco y mostrará un mensaje Paused in debugger junto a 2 botones, el primero (color azul) llamado Resume Script Execution hace referencia a seguir la ejecución hasta un siguiente breakpoint o hasta que termine el script, y el segundo (color gris) llamado Step over next function call refiere a seguir el flujo de ejecución del programa.
A continuación puedes ver lo mencionado en un GIF:
Un par de botones que nos ayudan a depurar nuestro código son: Step into next function call y Step out of current function. El primero lo que nos permite es ingresar al código de una función que usamos en tiempo de ejecución, mientras que el segundo nos permite salir de la función en la que nos encontramos depurando.
En el siguiente ejemplo, si tuviéramos un breakpoint en la línea 8, y usáramos el botón de Step over next function, se iría hacia la línea 9; no obstante, si usamos el botón de Step into next function call, ingresaría a la línea de código número 2 ya que es el código que está dentro de nuestra función.
Es momento de probarlo:
Debugger Statement
El segundo método para depurar un código es usando una palabra reservada en JS llamada debugger. Esta sentencia lo que nos permite es especificar en el código la línea exacta donde queremos que se detenga nuestra aplicación web para ser depurada.
Nota: Para que el script se detenga en la sentencia debugger debemos de tener el DevTools abierto y luego recargar la página.
A continuación una demostración usando el siguiente script:
Para poner en práctica lo leído en este post, puedes depurar el siguiente código:
Así que a partir de ahora…
