Como depurar nuestros webparts de Sharepoint Framework

Como desarrolladores de .NET o FrontEnd es dificil pensar que podemos llegar a terminar un proyecto sin ir linea tras linea para mejorar o encontrar errores.

Los que saben suficiente de Javascript sabran que con solo poner la sentencia debugger en nuestro codigo automaticamente el depurador segun el navegador que estemos usando se abrira automaticamente.

Utilizando el debugger

El Sharepoint framework hace uso de una herramienta llamada webpack, webpack es un generador de bundles, mas informacion la puedes encontrar aqui, esta herramienta lo que hace es combinar archivos cuando utilizamos la sentencia:

gulp serve  

La manera mas facil de empezar a depurar el codigo es poner la linea debugger en nuestro codigo:

debugger;  

Con esta sentencia el navegador parara en la linea de codigo y podras depurar facilmente.

Depurar archivos TypeScript

Como mencione anteriormente Sharepoint Framework utiliza TypeScript, y con gulp serve se combinan todos los archivos en un solo, depurar este archivo es demasiado dificil para poder encontrar nuestro codigo y hacerle un paso a paso.

Para esto existen los sourcemaps, los sourcemaps es una linea de codigo que se pone al final de los archivos y el navegador de esa manera carga el archivo necesario para hacerle depuraciĆ³n.

Cuando estes haciendo depuracion en el navegador, veras un archivos que empiezan por webpack, ahi podras encontrar el archivo necesario para hacerle depuracion

Una vez encuentres el archivo que necesites, ponemos un breakpoint de la manera usuario y hacemos nuestra depuracion de la manera tradicional

Como podemos depurar con VS Code?

Realmente este entorno es muy util, y la depuracion mucho mas sencilla, en vez de tener que buscar en los archivos de webpack, podemos poner directamente nuestro breakpoint en el IDE y depurar facilmente, para eso solo debemos instalar esta herramienta.

Cuando la hayas instalado, en la carpeta .vscode, creas un archivo llamado launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
        "name": "Launch localhost with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:4321/temp/workbench.html",
        "webRoot": "${workspaceRoot}/src",
        "sourceMaps": true
    }
  ]
}

Luego en una consola de ocmandos ejecutamos esto:

$ "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

Luego despues de ejecutar gulp serve, simplemente le damos F5 en VS Code, y al agregar el webpart a nuestro workbench, podemos ver como el navegador se pausa y podemos depurar nuestro codigo fuente directamente desde VS CODE.

Gracias a Elio Struyf por inspirarme con su blog en ingles