CODEWITHSUNDEEP
angularvisual-studio-codesingle-page-applicationvscode-debugger
mariob
mariob

Reputation: 683

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

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

Upvotes: 6

Views: 2480

Answers (1)

blinker
blinker

Reputation: 11

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.

Upvotes: 1

Related Questions