Debugging Angular app in VSCode is not working AGAIN

Question

I followed the official documentation: https://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular

Created a new Angular app using ng new my-app.
Opened the app in VSCode.
Checked if the app runs: ng serve. All good.
Installed Debugger for Chrome
Added launch.json configuration as instructed
Pressed F5 to start debugging...

According to the documentation it must launch the app and hit my breakpoints. Instead, I get this:

I have no idea why this is not working. Please advise. Thanks.

Also, why do we need this extension?

Looks like the debug module is built-in now in VSCode, and does exactly the same:

but is not working either (here I disabled the extension and used built-in debugger):

Keerthi · Accepted Answer · 2022-03-11 10:21:35Z

9

Delete any existing launch.json from .vscode folder in your workspace.
Press F5 (in your vscode workspace) and choose 'Chrome'. Note launch.json getting created afresh.
Start your angular app from a terminal: 'ng serve --port=8080'. Wait till it is up.
Go back to your vscode workspace. Press F5 to launch chrome in debug mode. Your app should load in Chrome.
Now you can set breakpoints in your source code within vscode. Interact with your app as you normally would. vscode should pause when your hit your breakpoints.

answered Mar 11, 2022 at 10:21

Keerthi

6141 gold badge9 silver badges15 bronze badges

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

3 Comments

g.pickardou Over a year ago

I am trying exactly this, chrome launches (very slowly), but the breakpoint "sourceMap": true became empty circle (unbound). More diagnostics: I've checked, "sourceMap": true and I can see and debug all my .ts sources in Chrome F12 devtools...

JBoy Over a year ago

I would highly advise backing up your current launch.json first

reza hrkeng Over a year ago

goooooooooooood

Panagiotis Bougioukos · Accepted Answer · 2021-03-07 12:36:04Z

3

I used to have your problems. I would struggle to find a solution and then some time later again the same thing. Always some confusing error with debugging from VS Code.

I moved to debugging my angular applications directly from browser and I am always happy. Chrome and Firefox have never disappointed me during debug.

Just keep in mind that for some strange reason webpack put all files under . source folder

Here is a picture of the structure and how you can find your files to debug directly from Chrome

You can also move to console tab and execute every statement that you want.

Also moving your mouse on the code will give you the values that your variables hold during execution.

answered Mar 7, 2021 at 12:36

Panagiotis Bougioukos

19.6k4 gold badges42 silver badges63 bronze badges

2 Comments

Slava Over a year ago

Thanks, Boug. Yes, something weird is going on with VSCode debug. I have had problems with VSCode debug for years. It worked at some point, but suddenly stops working without any changes to launch.json. Chrome debug, yes, but the whole point is to be able to debug in VSCode, like the docs state. At this moment I don't see why we need the extension if the debug feature is built-in. With it, I have to start the app manually by "ng serve", and only then start the debug, not sure how long this will last. The "attach" option never works. They change things too often, but don't update the docs.

Panagiotis Bougioukos Over a year ago

For me both the attach and listen functions seem always to have issues. I have invested much time in solving each issue separately, done my debugging , then some weeks later it does not work. Or I clone again another project and again it does not work. Therefore I have just switched to Chrome and Firefox debug and from that day I always debug directly without any issue so far.

Heitor Giacomini · Accepted Answer · 2022-11-26 22:10:07Z

1

install

npm install --global @azure/static-web-apps-cli@latest

Set your launch.json to

{
linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "SWA: Run Angular",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:4280",
            "preLaunchTask": "swa: start Angular",
            "webRoot": "${workspaceFolder}/",
            "timeout": 30000
        }
    ]
}

Now go debug it

answered Nov 26, 2022 at 22:10

Heitor Giacomini

4955 silver badges18 bronze badges

Comments

Mable98 · Accepted Answer · 2023-03-16 10:45:19Z

1

Took me ages to find it, but Turning off Sandboxing on VS Code solved my debugging issues.

VS Code -> Settings -> (Search for Sandbox) Uncheck: Window > Experimental: Use Sandbox

Hope that helps

answered Mar 16, 2023 at 10:45

Mable98

415 bronze badges

Comments

fatma zayed · Accepted Answer · 2023-03-28 09:32:18Z

0

check appconfig

"remoteServiceBaseUrl":"https://localhost:44301", "appBaseUrl": "http://localhost:4200",

check that remoteServiceBaseUrl is for localhos

answered Mar 28, 2023 at 9:32

fatma zayed

1291 silver badge5 bronze badges

Comments

Robbie Matthews · Accepted Answer · 2023-06-16 00:22:22Z

0

After I upgraded my Angular from 10 to 15 my debugger stopped working. Turned out to be the webroot in launch.json: All I had to do was change it from:

"webRoot": "${workspaceFolder}/projects/my-app"

to:

"webRoot": "${workspaceFolder}"

answered Jun 16, 2023 at 0:22

Robbie Matthews

1,69817 silver badges25 bronze badges

Collectives™ on Stack Overflow

Debugging Angular app in VSCode is not working AGAIN

6 Answers 6

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related