Visual Studio Code Debugging Not Working with Angular 6 CLI

Question

Hi I am trying to debug the application in visual studio code but i am unable to debug, its showing me error message 'configured debug type'chrome' is not supported'.

Following is launch.json file code

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [

    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 4200,
        "webRoot": "${workspaceFolder}"
    }
]
}

do you have the chrome extension installed?

O.MeeKoh
– O.MeeKoh

2019-03-18 21:11:02 +00:00
Commented Mar 18, 2019 at 21:11 — O.MeeKoh
– O.MeeKoh, Commented Mar 18, 2019 at 21:11
this is what you want to do to get it working.

O.MeeKoh
– O.MeeKoh

2019-03-18 21:13:04 +00:00
Commented Mar 18, 2019 at 21:13 — O.MeeKoh
– O.MeeKoh, Commented Mar 18, 2019 at 21:13

jithul vinod m.k · Accepted Answer · 2020-09-02 17:57:55Z

2

Anyone who is looking for a quick fix try this:

make sure your port number in the Launch.json settings is same as the one you get after "ng serve" command. usually it is "4200" and try to include both launch and attach settings in Launch.json.

once "ng serve" is completed and angular server started listening try to click "start debugging"

then the debugger will lauch a chrome instance on 4200 and after that you can see the break point will be bound.

Do not launch it manually by typing the link(http://localhost:4200/) in browser

edited Sep 2, 2020 at 17:57

answered Sep 2, 2020 at 17:52

jithul vinod m.k

615 bronze badges

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

Comments

Oscar Velandia · Accepted Answer · 2019-07-30 14:03:45Z

1

You need to add this bellow "webRoot" in the existing configuration:

"sourceMapPathOverrides": {
    "/./*": "${webRoot}/*",
    "/src/*": "${webRoot}/*",
    "/*": "*",
    "/./~/*": "${webRoot}/node_modules/*",
  }

answered Jul 30, 2019 at 14:03

Oscar Velandia

1,1661 gold badge8 silver badges10 bronze badges

Collectives™ on Stack Overflow

Visual Studio Code Debugging Not Working with Angular 6 CLI

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related