Debug Angular 2 Visual Studio Code

Finalizado el Quickstart de Angular 2 utilizando Vistual Studio Code, lo siguiente que me he planteado es ¿como puedo hacer debug de la aplicación que he "creado"?

En la propia página de Visual Studio Code se puede encontrar información detallada de como configurar/ejecutar este debug Debugging Visual Studio Code. Para ello es necesario instalar la extensión Debugger for Chrome de Visual Studio Code.

Una vez tengas instalada la extensión y hayas reiniciado el editor, siguiendo los pasos que se indican en la página de la extensión verás como añadir al fichero launch.json la configuración necesaria.

Puedes definir dos formas de ejecutar tu Debug en Chrome: launch y attach, la primera te lanzará una nueva instancia de Chrome y la segunda correrá sobre la que puedas tener abierta. Por simplicidad he optado por la primera.

Breakpoint ignored because generated code not found (source map problem?)

Si ya funciona tu debug en Chrome pero los puntos de interrupción no se alcanzan en la ejecución y cuando pones un punto de interrupción en tu código Typescript te aparece un mensaje del tipo: Breakpoint ignored because generated code not found (source map problem?)  tan solo debes tener en cuenta que debes configurar correctamente el launch del Debugger en Chrome.

En mi caso tan solo ha sido necesario configurar correctamente el atributo webRoot haciendo que apunte al root de los ficheros de la aplicación. webRoot apunta a la carpeta raíz del proyecto y mis ficheros están en la carpeta src/app así pues tan solo he tenido que configurar este atributo correctamente y el debug ha funcionado sin problemas como podéis ver en la captura:

"webRoot": "${workspaceRoot}/src/app"

Ejemplo del código de mi fichero launch.json:

    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug en Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/src/app"
        }
    ]