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

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.