VS Code how to debug Angular SPA with built-in JavaScript debugger

Question

So, I have had debugging setup using Chrome debug extension and following launch.json:

    "version": "0.2.0",
"compounds": [
    {
        "name": ".Net + Browser",
        "configurations": [
            ".NET Core Launch (console)",
            "Launch Chrome"
        ]
    }
],
"configurations": [
    {
        "name": ".NET Core Launch (console)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        "program": "${workspaceFolder}/bin/Debug/net6.0/grad-ludbreg-gis-demo.dll",
        "args": [],
        "cwd": "${workspaceFolder}",
        "stopAtEntry": false,
        "console": "internalConsole"
    },
    {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "chrome",
        "url": "https://localhost:5001",
        "webRoot": "${workspaceRoot}/wwwroot",
        "sourceMaps": true,
        "sourceMapPathOverrides": {
            "/Views": "${workspaceRoot}/Views",
            "webpack:///./src": "${workspaceRoot}/ClientApp/src"
        }
    }
]

}

My tsconfig.json also had sourceMap: true.

This configuration was working properly with extension, but now VS Code has built-in debugger and debugging experience has been degraded with this configuration.

Even though debugger stops at breakpoint, all variables are minified and mouse hoover over variables does not show anything.

Microsoft documentation does not help since it describes pure Angular project and SPA (WebApi with SPA in ClientApp folder). Also, any articles are found are related to Chrome Debug extension and not VS Code built-in JS debugger.

Anyone knows how to properly configure project for built-in debugger to work properly for ASP.NET Core Angular SPA project?

Thanks, Mario

Where you able to get it working? I am trying the Built in Javascript debugger for my angular app and I can't get it to debug. — Tashi
– Tashi, Commented Nov 14, 2021 at 7:29
@Tashi No, it works about the same - debugger does stop at breakpoint, but all variables are minified, so I simply deal with that degraded debugger experience. They did fix mouse hover over variable, though, so it is a bit easier. — mariob
– mariob, Commented Nov 15, 2021 at 10:04

Dharman · Accepted Answer · 2021-09-06 22:11:12Z

1

I was playing with this today as well. What I ended up doing is click the Add Configuration... button in the bottom right of the window. I chose the "Launch Chrome with ng serve" option and it created the configuration I needed. It works for me now with this configuration.

One thing to note....I ran ng s before I launched the debugger. For some reason it doesn't launch it automatically.

edited Sep 6, 2021 at 22:11

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 6, 2021 at 22:05

blinker

112 bronze badges

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

4 Comments

mariob Over a year ago

I do not see "Launch Chrome with ng serve" option, I only have "Launch Chrome" ... did you install something before to get this option?

blinker Over a year ago

First, make sure you are using the latest version of VsCode. Then remove the Chrome Debugger extension and trash (or rename) the old launch.json. Then try to Add a new configuration. Starting fresh might make a difference.

mariob Over a year ago

Did all that, only have "Chrome Launch" and "Chrome Attach", there is no mention of "Launch Chrome with ng serve".

blinker Over a year ago

I am not sure why this isn't working. Here is my configuration - try it and see if it works for you. Sorry, obviously I don't know how to do a code block in comments. :-(

"configurations": [ {       "name": "Launch Chrome w/ ng serve",      "type": "chrome",       "request": "launch",       "url": "http://localhost:4200",       "webRoot": "${workspaceRoot}",       "sourceMapPathOverrides": {         "webRoot": "${workspaceRoot}",         "webpack:/*": "${workspaceRoot}/*"       }     }

Collectives™ on Stack Overflow

VS Code how to debug Angular SPA with built-in JavaScript debugger

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related