VS Code Chrome Debugger extension(both latest versions) uses a launch.json to inform chrome how to proceed. When I build the angular app(CLI version 7.3.9) and start serving it locally, I can open the app sucessfully through chrome debugger however breakpoints are "not bound", presumably because I am not correctly setting the webRoot and/or sourceMapPathOverrides

My launch.json in its current state for reference

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome debugger against localhost",
            "url": "http://localhost:4200
            "webRoot": "${workspaceFolder}/dist/wwwroot",
            "sourceMaps": true,
             // "sourceMapPathOverrides": { 
             //   "webpack:///./src/*": "${webRoot}/*"
             // }  
        }
    ]
}

My folder structure for my angular project(with project folder name changed and a few things removed for clarity)

main.js.map and other sources of truth

In projectFolder/dist/wwwroot/main.js.map, the "sources" contains entries like "webpack:///./src/main.ts"

In projectFolder/angular.json, the project contains "root": "", "sourceRoot": "src",

And in the same angular.json, the build options contains "outputPath": "dist/wwwroot", "index": "src/index.html", "main": "src/main.ts",

my questions

1. What should webRoot be? What is the identifiable file/folder names that identify it so this question can apply to more than just my particular project.

2. What should sourceMapPathOverrides be if anything? I know there are default mappings the chrome debugger tries to use so maybe they are right but I am just setting webRoot wrong.

All the official documentation and other web searches never actually explain precisely how these source destinations are identified. At best I get vague descriptions like 'where the source files are served' and such.