1

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.

Improve this question
1
  • Shouldn't you need to change your workspaceRoot to ${workspaceRoot}/src?
    – joh04667
    CommentedApr 28, 2017 at 14:47

2 Answers 2

Reset to default
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!!

Improve this answer
2
  • 1
    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?).
    – Matthew Meppiel
    CommentedApr 28, 2017 at 15:30
  • 1
    I am having the exact same problem with the breakpoints being grayed out. Did you find a solution?
    – EiEiGuy
    CommentedJun 12, 2017 at 18:53
1

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

Improve this answer

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.