Debugging Angular 2 application in Visual Studio Code (Angular-Cli workspace)

1.       Go to debug view in the VSCode , and click on “gear” icon and select the “chrome”

2.       It will create “.vscode” folder and “launch.json” configuration file under it

3.       Start the Chrome in debug mode

Add “--remote-debugging-port=9222” while opening the chrome application (you can rename shortcut name also in “general” tab like “Google Chrome –Debug” then it will easy to find in start menu programs)

4.       Click “google chrome debug“ shortcut above, it will open chrome in debug mode. You can validate if the chrome is running in the debug mode or not by accessing the http://localhost:9222/

      

(Note: close all chrome instances before opening debug mode)

5.       Put breakpoint in the typescript file and launch the debug from debug view

                 

6.       Above default configuration works fine if you create angular 2 project without using the “Angular-CLI” or “webpack build”.  (Just need to make sure you have proper port numbers)

i.e

9222 àis the Chrome debug port

8080 àlocal server port number (where your angular app runs)

7.       But If you create the project using the Angular-Cli (which uses “WebPack” for application build), then control may not go to the our debug point at all .

Instead our debug point looks disabled with warning like “Breakpoint ignored because generated code not found (source map problem?). “   (Even though “SourceMap” configuration is set to “true” I was getting this problem.)

Problem

8.       To avoid this problem Add following to launch.json

9.       Following is full launch.json which worked for me (If you project is different path make sure to have proper path i.e. if you created project in D drive then “webpack:///D:*”).

{

    "version": "0.2.0",

    "configurations": [

        {

            "name": "Launch Chrome against localhost, with sourcemaps",

            "type": "chrome",

            "request": "launch",

            "url": "http://localhost:4200",

            "sourceMaps": true,

            "sourceMapPathOverrides": {

                "webpack:///C:*": "C:/*"

            },           

            "webRoot": "${workspaceRoot}"

        },

        {

            "name": "Attach to Chrome, with sourcemaps",

            "type": "chrome",

            "request": "attach",

            "port": 9222,

            "sourceMaps": true,

            "sourceMapPathOverrides": {

                "webpack:///C:*": "C:/*"

            },           

            "webRoot": "${workspaceRoot}"

        }

    ]

}

10.   Now launch the debug configuration, control will go to our debug point