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.
Contenido
Ejecutar paso a paso
Cómo crear modal react: paso a paso
Crear modales en React es fundamental para mantener a los usuarios en el sitio web y facilitar conve…
Inspeccionar desde móvil IOS o Android: chrome y safari
Hacer pruebas en nuestro proyecto o desarrollo web es clave para llevarlo acabo correctamente y para…
Cómo implementar Sepolia: Red de prueba de Ethereum
Antes de implementar un contrato en una red de mainnet como Ethereum debemos primero saber cómo impl…
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 arregloPunto 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í.
Keychron K6 65% compacto teclado mecánico inalámbrico para Mac, retroiluminación blanca, Bluetooth, multitarea, tipo C con cable teclado para Windows con interruptor marrón Gateron
- El Keychron K6 es un teclado mecánico inalámbrico Bluetooth compacto de 65 % con retroiluminación blanca hecha para Mac y Windows. El K6 está diseñado para maximizar tu espacio de trabajo y mejorar la productividad.
- Con un diseño único de Mac, compatibilidad con Windows y teclas de flecha dedicadas, el K6 ofrece una cómoda accesibilidad a todas las teclas multimedia y funciones esenciales a través de la combinación de pulsaciones de teclas, pero lo suficientemente compacto para que puedas llegar a tu ratón más fácilmente. Teclas adicionales para sistemas operativos Windows y Mac están incluidas.
- Se conecta con hasta 3 dispositivos a través del fiable chipset Broadcom Bluetooth 5.1 y cambia entre ellos fácilmente para necesidades multitarea. El K6 es mejor para adaptarse al hogar, la oficina y el uso de juegos ligeros mientras se conecta con tu smartphone, portátil y iPad. También tiene modo con cable con conexión USB tipo C.
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!
