Debuguear TypeScript en VsCode

En primer lugar vamos a crear una pequeña clase en una carpeta que sera la que vamos a debuguear desde Vs Code, y la abrimos.

Con Vs Code abierto presionamos : Cmd + Shift + P en mac o Ctrl + Shift + P en windows.

Seleccionamos Run Build Task

Y luego seleccionamos Configure Task Runner

Seleccionamos  TypeScript – tsconfig.json (Compile a TypeScript project)

Esto creara un archivo task.json en nuestra carpeta .vscode

Es necesario realizar algunas parametrizaciones para la key del json arg:

De esta forma, le indicamos a nuestro compilador, que los archivos TypeScript serán compilados a ES5, que la carpeta donde arrojara los .js transpilados sera en js, que genere sourcemap (files.map), que se quede mirando nuestro archivo  para que cuando algo cambie, automaticamente transpile y por ultimo le indicamos el file de entrada.

Si ahora presionamos una vez mas CMD + SHIFT + P (En mac), y ejecutamos la tarea de Run Build Task

Vamos a ver que en nuestro árbol de proyecto se genero una nueva carpeta js, con los archivos .js y .js.map 

Ahora para poder debuguear este código vamos a la solapa Debug de Vs Code, presionamos sobre play y elegimos node.js

Esto nos generara un archivo launch.json en la carpeta .vscode.

A este archivo debemos de hacerle algunas modificaciones para poder comenzar a debuguear.

  1. En la linea de “program” debemos de cambiar “${workspaceRoot}/app.js” por “${workspaceRoot}/app.ts”
  2. Debemos de agregar la key:   “outDir”: “${workspaceRoot}/js”
  3. Y por ultimo debemos de modificar la key sourceMaps a true

Y con estas configuraciones estamos listos para debuguear.
Vamos a la pestaña de debug y presionamos play (en el dropdown debe de estar seleccionado Launch)

Una vez hecho esto aparecerá una barra que nos indica que estamos debugueando :

Y si ponemos un breakpoint en nuestro código, el debug frenara, dándonos la posibilidad de inspeccionar los valores de nuestras variables.

Por ultimo si precionamos CMD + SHIFT + P (Para mac) y escribimos Debug Console y abrimos nuestra consola de Debug

Vamos a observar el output de nuestra aplicación.

Leave a Comment