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

Answer 2

We were using Gulp.js and had to add the following:

"sourceMapPathOverrides": {
    "/source/*":"${workspaceRoot}/[directory where all of our mappings are located]/*"
 }

Hope this helps someone who is trying to debug an angularjs app with VS Code.

Here's a sample config:

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "[your url here]",
        "webRoot": "${workspaceRoot}/[directory where your app is located]",
        "sourceMaps": true,        
        "sourceMapPathOverrides": {
            "/source/*":"${workspaceRoot}/[directory where your app is located and any additional .js files that are required by your app]/*"
        },        
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "runtimeArgs": [
            "--disable-session-crashed-bubble"
        ]
    }
]
}

Answer 3

I was having a similar issue but my project also included webpack that caused the above solutions to fail. After traversing the Internet I found a solution in a thread on github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

Anyway, this is what was done.

Note:- Before you start you must check whether you have the latest version of visual studio code and also have installed the extension called 'Debugger for Chrome' within VS Code.

Firstly, in './config/webpack.dev.js'

• use => devtool: 'source-map'
• instead of => devtool: 'cheap-module-source-map'

Then install and use the write-file-webpack-plugin:

• npm install --save write-file-webpack-plugin

Add the plugin to './config/webpack.dev.js' by adding:

• const WriteFilePlugin = require('write-file-webpack-plugin');

under the Webpack Plugins at the top. Continue to add:

• new WriteFilePlugin()

to the list of plugins after new new DefinePlugin(), i.e

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

This ensures that the source maps are written to disk

Finally, my launch.json is given below.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

notice the absence of '/dist/' in the webroot. with this config, source-maps are in ./dist/, but they point to ./src/. vscode prepends the absolute root to the workspace, and correctly resolves the file.