Here's what was going on! It has to do with the path to the project in the .vscode file and the need to debug two separate project/s folders at one time!
${workspaceFolder}
I have two folders for the app
- Yogabandy-SPA (Angular app)
- Yogabandy.API (ASP.Net Core Web API)
I thought the best place for the .vscode file was at the root level, and unless someone has a better solution this seems to be the best place.
But the problem is the path of the workspace folder needed to be corrected.
Corrected paths
"webRoot": "${workspaceFolder}" // old
"webRoot": "${workspaceFolder}/Yogabandy-SPA" // new
"program": "${workspaceFolder}/bin/Debug/netcoreapp2.2/Yogabandy.API.dll" // old
"program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll" // new// removed from the 'server' command so two debuggers don't open, just one
"serverReadyAction": {
"action": "openExternally",
"pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
},Added a compound so that I could debug both projects together.
"compounds": [{
"name": "Server/Client",
"configurations": ["server", "client"]
}]I'm still having a minor issue starting the debugger. VS Code displays this below, but I am able to now debug both apps together and hit all breakpoints from both projects.
If anyone has a better solution please let me know.
"compounds": [{
"name": "Server/Client",
"configurations": ["server", "client"]
}],
"configurations": [{
"name": "server",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll",
"args": [],
"cwd": "${workspaceFolder}/Yogabandy.API",
"stopAtEntry": false,
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceFolder}/Views"
}
},
{
"type": "chrome",
"request": "launch",
"name": "client",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/Yogabandy-SPA"
}Here's what was going on! It has to do with the path to the project in the .vscode file and the need to debug two separate project/s folders at one time!
${workspaceFolder}
I have two folders for the app
- Yogabandy-SPA (Angular app)
- Yogabandy.API (ASP.Net Core Web API)
I thought the best place for the .vscode file was at the root level, and unless someone has a better solution this seems to be the best place.
But the problem is the path of the workspace folder needed to be corrected.
Corrected paths
"webRoot": "${workspaceFolder}" // old
"webRoot": "${workspaceFolder}/Yogabandy-SPA" // new
"program": "${workspaceFolder}/bin/Debug/netcoreapp2.2/Yogabandy.API.dll" // old
"program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll" // new// removed from the 'server' command so two debuggers don't open, just one
"serverReadyAction": {
"action": "openExternally",
"pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
},Added a compound so that I could debug both projects together.
"compounds": [{
"name": "Server/Client",
"configurations": ["server", "client"]
}]I'm still having a minor issue starting the debugger. VS Code displays this below, but I am able to now debug both apps together and hit all breakpoints from both projects.
If anyone has a better solution please let me know.
"compounds": [{
"name": "Server/Client",
"configurations": ["server", "client"]
}],
"configurations": [{
"name": "server",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll",
"args": [],
"cwd": "${workspaceFolder}/Yogabandy.API",
"stopAtEntry": false,
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceFolder}/Views"
}
},
{
"type": "chrome",
"request": "launch",
"name": "client",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/Yogabandy-SPA"
}Just in case this was not helpful, I had the same problem, just because of wrong angular.json configuration
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
without this configuration, it's handled like production and You are not able to stop at breakpoints.
Unbound breakpoints when debugging Angular in VSCode with Chrome
Angular 18 Upgrade Vive causes VSCode Unbound Breakpoint issue
Cannot debug Angular 18 from VSCode
Angular 7 Breakpoints are not hit
Videos
I create a new application using:
ng new debugtest1
I then open the new directory in VSCode. I can see the launch.json that was created by ng new, see this below.
I hit F5 to run and debug, and indeed the VSCode runs ng serve in its terminal, opens Chrome and runs the app. No problems so far.
The problem is, the VSCode debugger is extremely unreliable and unpredictable:
Sometimes valid breakpoints are hit, sometimes not. I can tell they are not being hit because even simple console.log() breakpoints do nbnot pause the debugger, when I can see their output in the console!
When the debugger does pause on a breakpoint, sometimes the "play" and "step over" buttons will work, sometimes they do nothing at all.
The "Reload" button in the debug toolbar (next to "Stop" and "Play") does not do anything. It does not hot reload the app as you would expect.
When I hit the "Stop" square button, the debug session stops but the ng serve terminal process started by the debugger does not terminate. I have to manually terminate the terminal process before I can start a new debugging session.
Effectively, debugging is not possible. In older versions of Angular and VSCode, I have debugged with no issues.
Can anyone advise on how to get even this simple debugginig working on VSCode?
The launch.json created by "ng new" in case it helps:
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}I faced the same issue using node v17.2.0 in Webstorm. The downgrade to v16.13.1 fixed the issue.
Angular: 13.1.0
You should try the latest launch.json and tasks.json file examples from VSCode Debug Recipes page:
- https://github.com/microsoft/vscode-recipes/tree/main/Angular-CLI
For those coming across this the fix is to modify your launch.json sourceMapPathOverrides as follows:
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*"
}
This fixed it for me with the latest @angular/cli (version 1.7.3).
Answer was found here.
Angular CLI 7.2.2:
Webstorm/Intellij - breakpoints never hit, VSCode - breakpoints unverified/never hit, Chrome debugger - breakpoints hit perfectly.
Solution: in angular.json set evalSourceMap to "false".
This triggers the Webpack that Angular CLI uses under the hood to generate source maps to original source code ("source-map") instead of generated code ("eval"). https://webpack.js.org/configuration/devtool
See under node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js
You can of course hack the browser.js file to set some other value for devtool.
The fix for this was simple, I hadn't set the sourceMap property to true in angular.json for that particular environment, instead I had "sourceMap": false,
See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap for more info.
With thanks to Connor - https://github.com/microsoft/vscode-js-debug/issues/872
In my case I needed to change webRoot from
"webRoot": "${workspaceFolder}"
to
"webRoot": "${workspaceFolder}\projectName"
Project name is the name you've given in the beginning ng new projectName.
Then breakpoint bound.