Inspeccionar nuestro código es una buena forma de encontrar y resolver errores. Por ello, en este post, te enseñaremos cómo funciona el debugger de JavaScript.
¿Qué es el debugger de JavaScript?
En JavaScript, disponemos de una herramienta que se llama el debugger. El debugger, también conocido como una herramienta de depuración, sirve para encontrar fallos en nuestro código de forma más eficiente. Dicho de otra manera, el debugger es una herramienta que nos ayuda a inspeccionar el código de nuestro archivo.
Entonces ¿cómo funciona el debugger de JavaScript o depurador JavaScript? A continuación, te explicamos exactamente qué sucede con él.
¿Cómo funciona el debugger de JavaScript?
Ten presente que las siguientes instrucciones para entender cómo funciona el debugger de JavaScript se basan en el software de programación Visual Studio Code. Si no es el software que utilizas para el debugger, te invitamos a que lo pruebes descargándolo en su página oficial.
Entonces, para saber cómo funciona el debugger de JavaScript, primero debes ir a la barra de elementos en el costado izquierdo de tu pantalla de Visual Studio Code. En principio, el cuarto símbolo de arriba abajo debería ser un triángulo con un insecto al lado, pincha allí. Presionar este icono nos abre un panel de herramientas en el lado derecho con las opciones Run and Debug, JavaScript Debug Terminal y Debug URL. Ahora, clica en el primer botón azul “Run and Debug”.
Al darle a este botón, el programa nos abrirá una barra de navegación con distintas opciones para que seleccionemos el entorno en el que estamos actualmente. En nuestro caso, seleccionaremos Node.js como nuestro entorno. Sin embargo, existen otras opciones, como Chrome, Edge:Launch, y VS Code Extension Development. Al elegir nuestro entorno, Visual Studio Code nos lleva directamente a la pestaña “ debugger en JavaScript Console”, al lado del terminal en el que normalmente ejecutamos nuestro código. Allí, encontraremos nuestro código ejecutado de manera automática.
Ahora, puedes utilizar tu cursor para moverte por el lado izquierdo de los números de filas del debugger en JavaScript en tu editor de código. Verás que aparece un punto rojo a medida que te mueves por las filas. A esto se le llaman break points. Para crear un nuevo break point, basta con que cliques en el punto rojo en la fila en la que quieras crearlo. Esto genera que el programa ejecute el código de manera lineal y se detenga en ese punto.
Una vez creados tus break points, puedes hacer clic en el botón “Run and Debug” de nuevo. Ahora, te aparecerá un menú en tu programa del debugger JavaScript o depurador JavaScript con distintos iconos. Estos nos permiten ejecutar las acciones continue, step over, step into, step out, restart y stop. Con este menú, podemos controlar lo que se va a ir ejecutando en nuestro debug console. Esta pantalla es muy útil porque, además de controlar la ejecución del código y sus puntos finales, podemos ver la lista de variables que hemos definido a la izquierda. Con ella, podemos saber el valor exacto de cada variable.
Entonces, el debugger en JavaScript nos permite seleccionar trozos de código exactos e inspeccionar sus elementos con facilidad.
¿Qué sigue?
Ahora que sabes cómo funciona el debugger de JavaScript, te invitamos a poner en práctica los conocimientos que has aprendido sobre este lenguaje de programación en nuestro Desarrollo Web Full Stack Bootcamp. Aquí aprenderás a dominar JavaScript y te formarás en otros lenguajes de programación, como HTML. ¡Matricúlate ya!
