Visual Studio Code Dia 6 Depuracion

Vídeo Guía

Vídeo 6: Depuración

Hola a todos, bienvenidos al vídeo número 6 en Visual Studio Code

Este es el último vídeo de la primera serie y en este capítulo vamos a ver debugging o depuración, desde la configuración hasta los keybinds o shortcuts para el teclado espero les guste.

Para poder hacer depuración en Visual Studio Code para el Mac debemos instalar el mono en caso de que queramos hacer depuración con .NET, algunos de los ejemplos tendrán :NET otros de los ejemplos tendrán TypeScript o JavaScript.

Mono y Homebrew

Para poder instalar mono lo hacemos a través de Homebrew o brew este es un gestor de paquetes como nuget simplemente se instala, aquí está la página brew.sh y esta el comando para poder ejecutar.

alt text

Para poder instalar simplemente lo ejecutamos en la consola y el simplemente lo instala.

alt text

Si quiero saber que objetos o que paquetes tengo instalados en este Mac con brew simplemente le doy brew list. Si quiero instalar algún paquete algún software en especial le doy brew install y el nombre del paquete en este momento está haciendo la instalación vamos a esperar y aquí vemos que la instalación fue satisfactoria.

alt text

Si le doy brew list entonces me aparecen los paquetes, las aplicaciones que he instalado con brew, ya tengo mono, no debo hacerlo de nuevo pero el comando es simplemente brew install mono para que ustedes lo tengan en cuenta.

alt text

Depuración de una aplicación Angular con JavaScript

Ahora estamos listos para hacer debugging vamos a probar, entonces Visual Studio Code tengo abierto el proyecto codeplay de Johnpapa y simplemente dentro de la carpeta src, roots, voy a buscar este en server, src server routes.js (routes.js).

alt text

Que es un método que me obtiene una lista de personas de un API local a través de un archivo JSON, pero lo que me interesa aquí, realmente es aprender a hacer la depuración, entonces en la parte izquierda en el en el icono de depuración.

alt text

Le vamos a dar clic en play con éste botón se abre el archivo launch.json donde está toda la configuración de depuración pero lo que vamos a revisar este momento es sí funciona correctamente.

alt text

Le damos clic en play y vemos que inmediatamente la barra inferior cambia de color.

alt text

Quiere decir que estamos en modo depuración y tengo que inició en el app.js en esta línea en el "use strict".

alt text

Si me voy para Google Chrome tengo una aplicación que corre en el localhost:8001.

alt text

Si le doy ctrl+r para reiniciar, entonces como esta página que es la página inicial o la vista inicial llama a esta función getPeople, entonces el break point del debugger se va a lanzar y vamos a poder ver el depurador en acción

alt text

Entonces en la parte superior izquierda, vamos a ver las variables locales también las variables globales partes del Script y de la clausura.

alt text

En la parte inferior está lo que es inspección en inglés el watch aquí simplemente podemos poner, por ejemplo, data.people.

alt text

Y el automáticamente me trae los datos y aquí puedo ver los datos de ese archivo o de ese API que me retorna.

alt text

Ya en la parte, superior izquierda, aquí tengo un error voy a recargar la ventana voy a depurar de nuevo. Le doy play para continuar le doy F5 aquí de nuevo, el me vuelve aquí, lo que quiero mostrarles es estos iconos de la parte superior está el F5 para continuar.

alt text

El F10 para saltar el procedimiento en el que está.

alt text

El F11 para el paso a paso por instrucciones.

alt text

Y shift F11 es para salirse la función que estaba.

alt text

Obviamente está reiniciar con shift command F5 y parar que no tiene shortcut en ese instante.

alt text

¿Listo? Entonces ya vimos cómo hacer depuración de una aplicación Angular con JavaScript continuamos entonces con otro tema .

Launch.json

Ahora ¿Porque fue que funcionó nuestro debugging? es porque tenemos un archivo launch.json dentro de nuestro proyecto.

alt text

Entonces simplemente vamos a darle clic en configuración y en este botón nos permite abrir el launch.json en nuestro proyecto.

alt text

Ahora, ¿Que es importante en este launch.json? primero hay algo que se llama configurations, Configurations es un arreglo y estos nombres que ustedes ven aquí launch src

alt text

Y en la parte inferior attach son las configuraciones de depuración

alt text

Entonces cómo pueden ver estas dos que aparecen acá son las mismas que aparecen en el archivo

alt text

Luego dice el tipo de depuración, entonces en este caso node porque estamos con una aplicación de Angular el programa a ejecutar, entonces utilizamos la variable workspaceRoot que es la raíz de nuestra aplicación y luego le concatenamos digamos que nuestro JS principal,

alt text

stopOnEntry

stopOnEntry es muy importante aquí lo tenemos en True y es por esa razón que ahorita que vimos en la aplicación corriendo.

alt text

Vamos a hacerlo otra vez si nos deja este mensaje vamos a recargar aquí, por eso es que la aplicación ahora nos entraba a este "use strict", ósea ese stopOnEntry nos permite de manera rápida saber o parar en las primeras líneas de código del programa es decir la app.js.

alt text

Entonces aquí lo tenemos si lo apagamos simplemente le ponemos false.

alt text

Vamos a parar y luego a iniciar la depuración, vamos a guardar. Listo aquí ya inició, miren que en este caso inició pero no paró en la primera línea de código del app.js.

Entonces es importante entender esa parte igual aquí hay muchos más parámetros si le damos coma, aquí control espacio, entonces él me va a cargar con el intelliSense del esquema que tenga para ese JSON el código o digamos los parámetros que yo puedo configurar acá, entonces aquí está address, consola y un montón de cosas más, cada uno tiene su respectiva documentación.

alt text

Depuración con TypeScript

Hablemos un poco de depuración con TypeScript entonces he abierto el proyecto de Tsplay de repositorio de Johnpapa como ustedes pueden ver es un proyecto de tipo typescript, pero también hay archivos .js y .map que son los source map.

alt text

Entonces si nos vamos a la configuración de depuración ustedes podrán ver que en la parte de source map está en true,

alt text

Es decir el eso nos permite, nos permitirá hacer depuración directamente de los archivos TypeScript y no de los JS generados, los archivos JS son generados por el compilador de TypeScript y los punto map también que es la manera de mapear el archivo de JavaScript al archivo de TypeScript.

He puesto un punto de interrupción en la función getPeople en el archivo de TypeScript

alt text

También es importante que ustedes vean que hay un archivo que se llama tsconfig.json está dentro de la ruta de server, es relativo a esta ruta solamente y aquí también se habilita el sourceMap.

alt text

alt text

Entonces simplemente me voy a la depuración le doy clic a play o F5, en la parte inferior pueden ver que ya estoy en modo depuración y en el navegador tengo la aplicación funcionando simplemente le doy F5 en el navegador para recargar el agente, digamos que la variable people y pueden ver que estoy en un archivo TypeScript. Estoy haciendo depuración de un archivo TypeScript y todas los características de depuración aplican también para TypeScript entonces aquí tengo watch donde puedo poner data, por ejemplo, y tengo todo todos las propiedades y métodos aquí tengo el call stack y en la parte inferior tengo todas las propiedades donde puedo activar o desactivar break points.

alt text

Cuando yo desactivo un break point miren que queda con el botón gris pero yo llego y lo puedo volver a activar para que quede como estaba.

alt text

Entonces de esta manera estamos haciendo depuración de algo en TypeScript sin necesidad de revisar el código complejo, digamos que aquí no esta tan complejo porque es un archivo pequeño pero después de que ustedes empiecen a trabajar bastante con TypeScript, el JavaScript generado puede resultar bien complejo y si están haciendo minificación con webpack para eliminar todos los espacios y cambiar los nombres de las variables , hacer debugging o depuración de archivos JavaScript es imposible entenderlos.

Entonces me parece que es bastante importante esta característica para que la tengan en cuenta y esta es la última parte del video de depuración en Visual Studio Code y es también el último vídeo sobre la primera serie de todos los vídeos sobre Mastering SharePoint Framework recuerden que la segunda parte será TypeScript la tercera parte será React y por último nos centraremos después de todos estos conocimientos solamente en SharePoint Framework espero que estos seis vídeos hayan sido de su agrado y nos vemos en la próxima serie.