Cómo funciona el debugger de JavaScript

Autor: | Última modificación: 20 de julio de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

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, es una herramienta que nos ayuda a inspeccionar el código de nuestro archivo.

Entonces ¿cómo funciona el debugger de 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, 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 «Debug 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 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 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 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!