Unable to debug AngularJS app using Visual Studio Code and Chrome debugger extension

Question

I am using the Debugger for Chrome plugin with Visual Studio Code.

1) When I try to launch the debugger in Visual Studio Code, I get this error - Failed to load resource: net::ERR_CONNECTION_REFUSED .

2) When I try to attach the debugger, I get this error - Failed to load resource: the server responded with a status of 404 (Not Found) .

My end goal is to be able to debug a pure AngularJS web app.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "runtimeArgs": [
            "--new-window", //Open in new window
            "--remote-debugging-port=9222" //Open in port 9222 (standard chrome debug port)
        ],
            "webRoot": "${workspaceRoot}/app/"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Note: I have made sure there are no running instances of Chrome before I start the debugger. I am running Windows 10 .

Answer 1

I faced the same issue: starting the vs code debugger and getting the ERR_CONNECTION_REFUSED.

Then I realized that the vs code debugger was not starting the server.

A simple

$ npm start

in the command line before launching the debugger and this solved my misunderstanding :-$