Debugging Angular w/ VS Code

Question

I seem to be having issues debugging an Angular application using Visual Studio Code. Any guidance would be greatly appreciated.

I am using Visual Studio Code version 1.11.2 and generating a fresh project using the Angular CLI:

ng new my-app
cd my-app
ng serve -o

In VS Code, I ran the Extensions: Install Extension command and installed Debugger for Chrome version 3.0.1. Here's my default launch.json that was generated:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 4200,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Running the debugging seems to throw an error. Here's the output from the logs:

    Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: <!DOCTYPE html>

OS: win32 ia32
Adapter node: v6.5.0 ia32
vscode-chrome-debug-core: 3.14.17
10:24:18 AM, 4/28/2017
debugger-for-chrome: 3.0.1
From client: initialize({"clientID":"vscode","adapterID":"chrome","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true})
To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"exceptionBreakpointFilters":[{"label":"All Exceptions","filter":"all","default":false},{"label":"Uncaught Exceptions","filter":"uncaught","default":true}],"supportsConfigurationDoneRequest":true,"supportsSetVariable":true,"supportsConditionalBreakpoints":true,"supportsCompletionsRequest":true,"supportsHitConditionalBreakpoints":true,"supportsRestartFrame":true,"supportsExceptionInfoRequest":true,"supportsRestartRequest":true}}
From client: attach({"name":"Attach to Chrome, with sourcemaps","type":"chrome","request":"attach","port":4200,"sourceMaps":true,"diagnosticLogging":true,"webRoot":"c:\\Users\\meppielmr\\Desktop\\Training"})
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStarted","data":{"request":"attach","args":["name","type","request","port","sourceMaps","diagnosticLogging","webRoot","sourceMapPathOverrides","skipFileRegExps"]}}}
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
To client: {"seq":0,"type":"response","request_seq":2,"command":"attach","success":false,"message":"Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /json</pre>\n</body>\n</html>).","body":{"error":{"id":2010,"format":"Cannot connect to runtime process, timeout after {_timeout} ms - (reason: {_error}).","variables":{"_error":"Cannot connect to the target: <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /json</pre>\n</body>\n</html>","_timeout":"10000"}}}}
From client: disconnect({"restart":false})
Terminated: Got disconnect request
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStopped","data":{"reason":"Got disconnect request"}}}
To client: {"seq":0,"type":"event","event":"terminated"}
To client: {"seq":0,"type":"response","request_seq":3,"command":"disconnect","success":true}

Where do I go from here? Thanks in advance for all the help.

Shouldn't you need to change your workspaceRoot to ${workspaceRoot}/src? — joh04667
– joh04667, Commented Apr 28, 2017 at 14:47

Madhu Ranjan · Accepted Answer · 2017-04-28 14:47:27Z

1

do not use ng serve with -o, it will open a instance of default browser which is not attached.

just do ng serve and Go to debug menu in VS code then hit play icon from there, it will open a instance of chrome and you should be able to hit the breakpoints.

Hope this helps!!

answered Apr 28, 2017 at 14:47

Madhu Ranjan

18k7 gold badges65 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matthew Meppiel Over a year ago

Thank you both for the replies. I've updated ${workspaceRoot} to ${workspaceRoot}/src and stopped using the -o flag with the CLI. Chrome is opening now, but my breakpoints are gray with the following error: Breakpoint ignored because generated code not found (source map problem?).

EiEiGuy Over a year ago

I am having the exact same problem with the breakpoints being grayed out. Did you find a solution?

bytebender · Accepted Answer · 2019-11-20 21:17:37Z

I found this today and it works really well!

https://github.com/microsoft/vscode-recipes/tree/487f38ea801100d80fdc5ddf257d9f9b1d621c72/Angular-CLI

the launch.json looks like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
    }
  ]
}

And then they include a tasks.json file as well:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": [
          "relative",
          "${cwd}"
        ],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    },
  ]
}

The only change I made was to switch it to https

There are tons of vs code recipes here

Collectives™ on Stack Overflow

Debugging Angular w/ VS Code

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related