Aprende Visual Studio Code

Debugging: eliminar errores en Visual Studio Code

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
Cuando trabajamos con JavaScript, es necesario poder probar nuestro código y, a veces, revisar paso a paso cada línea. Visual Code integra una forma de poder debuggear y revisar nuestro código sin tener que ocupar alguna herramienta extra y nos lleva directamente a la línea de código que debemos editar o revisar.
04:43

Transcripción

(hombre) Visual Studio Code integra algunas herramientas para poder "debuguear" una aplicación directamente en este editor de código. Es bastante sencillo, veamos el siguiente ejemplo. En este caso, tenemos una aplicación hecha con "Express" y nosotros lo que queremos es estar "debugueando" para saber qué datos hay en determinada situación. Entonces, lo primero que tenemos que hacer es acceder al menú para "el debuguer" o depuración y una vez que accedemos aquí, lo primero que tenemos que hacer es levantar la configuración. Vamos a encontrar este ícono, que parece como un tipo de tuerca que nos da alusión a la configuración y tiene un punto rojo. Eso quiere decir que vamos a generar el entorno. Aquí, vamos a elegir en qué entorno vamos a trabajar. Seleccionamos la opción de "Node.js" Ya que tenemos la opción, automáticamente nos crea un archivo con distintas configuraciones, que por ahora, no nos vamos a meter ahí, pero tú puedes leerlas, y si tú gustas, puedes modificarlas a cómo tú necesites. Podemos cerrar el archivo, no pasa nada. Ahora si tú te regresas a los archivos vas a encontrar que se creó una carpeta que se llama ".vscode" y aquí dentro está este archivo de lanzamiento. Regresamos a la sección de depuración o "debugueo" y aquí, simplemente vamos a pulsar el "Play". Cuando pulsamos el "Play" se levanta un servidor, en este servidor podemos ver qué sucede en la consola, si no se muestra automáticamente podemos dar clic en este botoncito y al dar clic se va a desplegar la consola. Probemos cómo se ve esto, así que vamos a acceder directamente a "localhost" en el puerto 3000 y vemos que se levantó el servidor. Ahora ¿de qué manera me sirve la depuración? Si llegara a existir algún error, automáticamente esto se detiene y como vemos, aquí empieza a suceder todo lo que pasa en consola. Vamos a ver, por ejemplo, en el archivo "users.js" que es una de las rutas que existen, vamos a crear, antes de la respuesta, un objeto, entonces, por ejemplo, vamos a crear un objeto que se llame "persona" y este objeto persona vamos a crearle dos propiedades, una propiedad que se llame "nombre", por ejemplo, voy a poner aquí mi nombre y una propiedad que se llame "apellido", aquí pondré mi apellido. Si yo quisiera ver qué sucede, tengo dos opciones. Uno, puedo escribir aquí un "console.log" y puedo mandar de parámetro el objeto "persona". Una vez que yo lo tengo listo, simplemente pulso aquí, en el botón de reiniciar y esto va a levantar nuevamente el servidor. Vamos a acceder aquí, pero como estamos trabajando en la ruta de ususarios entonces escribimos "/users" Voy a dar clic derecho y voy a inspeccionar el código y me dirigiré a la consola. Aquí en la consola, simplemente no va a aparecer nada porque no estamos mostrando algo directamente en pantalla, donde sí me va a aparecer va a ser directamente en la consola de depuración. Vemos como aquí ya me salió el objeto, entonces yo puedo estarlo viendo de esta manera, pero, una de las cosas interesantes es aprovechar toda esa consola para poder depurar. Entonces lo que podría hacer es ejecutar aquí un "breakpoint". Entonces si vemos, cada vez que paso por esta sección, aparece un punto rojo eso significa un "breakpoint", entonces voy a dar un clic para generar un "breakpoint" y voy a levantar, nuevamente, el servidor. Cuando regreso y actualizo esto se detiene y automáticamente me regresa a mi editor de código. Vemos cómo se detiene el proceso y aquí donde está detenido empezamos a ver alguna variables y como tal vemos que aquí existe el objeto "persona" y vemos que tiene las propiedades Así yo puedo indagar entre los "request", entre las peticiones y entre todos los elementos que yo pueda ir determinando. Así puedo agregar también tantos "breakpoints" yo necesite y puedo ir avanzando paso a paso en cada una de las tareas que se van ejecutando o puedo, simplemente ir un nivel más adentro o un nivel más afuera o detener o actualizar este servidor. También es posible que yo pueda ser "Watches" o estar observando cada una de las variables y los cambios que esta va teniendo o, si yo necesito también, puedo establecer los puntos de interrupción o los "breakpoints" directamente en esta parte de la consola. Como ves, tener todas estas herramientas integradas te facilitará también mucho el trabajo cuando tienes entornos de este tipo

Aprende Visual Studio Code

Conoce las características del editor de código multiplataforma Visual Studio Code, como son IntelliSense, depurar desde su consola y trabajar directamente tu código en Git.

1:23 horas (26 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.