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

Astronomical

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. – Prevost

@Prevost 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. – Astronomical

Answer 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.

Oyez

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

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. – Oyez

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

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}/*" } } – Oyez