Ejecutar Javascript paso a paso en Visual Studio Code: JavaScript debugger

Si estás buscando una forma de ejecutar Javascript paso a paso, este es el post para ti. Hoy veremos cómo podemos usar algunas funciones o configuraciones especiales de Visual Studio code para poder correr nuestro código de Javascript paso a paso.

Es importante conocer diferentes formas de ejecución ya que, cuando tenemos códigos extensos, necesitamos organización para ver qué es lo que ocurre y en qué lugar.

Posiblemente ya te has topado con este problema, como yo, pero ejecutar JavaScript paso a paso mejora mucho el razonamiento o lógica del código que estás realizando. Así mismo, podemos resolver o encontrar caminos más rápido.

Antes de iniciar, recuerda que te dejo un video al final para guiarte mejor en el proceso.

Ejecutar paso a paso

Para ejecutar Javascript paso a paso vamos a necesitar básicamente tres cosas:

• código para ejecutar.
• Punto de ejecución.
• configurar visual studio para correr paso a paso

Código

Entonces para lo primero, tengo el siguiente código. Crearé un arreglo vacío el cual se irá llenando por medio de un for y .push:

var arreglo = []; // arreglo vacío

for( var i = 0; i < 10; i++){
    arreglo.push(i); // agregar el valor a la última posición.
}

console.log(arreglo); // mostrar el arreglo

Punto de ejecución paso a paso

Ahora, el segundo paso es seleccionar un punto de ejecución. En el lado izquierdo del número de línea, haz click y verás un punto rojo. Este debe ser un punto clave en tu código, por ejemplo al inicio o en medio del for anterior.

Configurar visual studio code

Una ves terminado el código, en la parte izquierda verás el símbolo run and debug. Haz click y luego selecciona nuevamente run and debug. Se abrirá un menú de opciones, de las cuales puedes seleccionar Node.js.

Al hacer click verás el menú disponible para ver la ejecución paso a paso.

Para usarlo, solo haz click en la flecha hacia abajo y podrás ver en la parte izquierda como las variables van tomando sus valores, así hasta llegar a la concusión del código.

Video de ayuda

Hice este video para ayudarte en el proceso. Si te gusta no olvides dar like y suscribirte para nuevos videos.

Producto sugerido

Si al igual que yo, pasas demasiado tiempo en un pc, puede que este producto te ayude, como yo a cuidar mis manos y a su vez, optimizar mis horas de digitalización.

Te recomiendo totalmente este teclado mecánico Keychron k6. Si quieres ver la reseña completa puedes hacerlo aquí.

Conclusión

Ejecutar nuestro código JS paso a paso es recomendable ya sea que estemos iniciando o ya llevemos un tiempo programando. Conocer la ejecución va a acelerar el aprendizaje y resolución del código en general!