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.

asked Apr 28, 2017 at 14:31
1
  • Shouldn't you need to change your workspaceRoot to ${workspaceRoot}/src? Commented Apr 28, 2017 at 14:47

2 Answers 2

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
Sign up to request clarification or add additional context in comments.

2 Comments

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?).
I am having the exact same problem with the breakpoints being grayed out. Did you find a solution?
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

answered Nov 20, 2019 at 21:17

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.