Visual Studio Code debugging with AngularJS

Question

I want to debug my Angular App with the new Visual Studio Code, but It seems there is a problem with Angular and Visual Studio Code..

This is my launch.json:

<         


        

Answer 1

Okay, with the help of the @code folks, I got it working. I'm now able to fully debug an Angular client from the IDE! Hopefully, this will help someone else...

First, you need to download the "Debugger for Chrome Extension." You do this by typing this:

F1
ext Install Extensions
debug (then select Debugger For Chrome)

Once that is installed, I used MSFT's instructions found here:

https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

I only can get the "attach" method working, so I use that with Chrome. Here is the final version of the launch.son file I use:

{
    "version": "0.2.0",
    "configurations": [
        {
            // Use this to get debug version of Chrome running:
            // /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "./www"
        }
    ]
}

Also, don't forget to start Chrome in debug mode with this (for Mac):

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Great editor @code!

OBS: Don't forget to kill ALL Chrome Instances as mentioned here: https://github.com/Microsoft/vscode-chrome-debug/issues/111#issuecomment-189508090