What is webRoot in the vscode chrome debugger launch launch config?

The webRoot variable allows you to refer to the directory where your local source files are located.
By default it refers to ${workspaceFolder}, the place where the file are usually located.

Internally it's used to bind the source maps to the local files. It sets the defaults of sourceMapPathOverrides as you see here:

const DefaultWebSourceMapPathOverrides: ISourceMapPathOverrides = {    'webpack:///./~/*': '${webRoot}/node_modules/*',    'webpack:///./*': '${webRoot}/*',    'webpack:///*': '*',    'webpack:///src/*': '${webRoot}/*',    'meteor://💻app/*': '${webRoot}/*'};

If your Visual Studio Code doesn't hold on your breakpoints can be caused by different reasons:

1. Source maps are not available.
2. Remote debugging of chrome is disabled.
   To enable start chrome with chrome.exe --remote-debugging-port=9222.
3. Pattern in the property url of your launch.json does not match the app's url.
4. Source maps are not bind correctly.
   
   The property sourceMapPathOverrides in the launch.json maps the source map path to your local source files.If you haven't defined further paths, your Debugger for Chrome maps like following:
   • webpack:///./~/* to ${workspaceFolder}/../ui-web-server/node_modules/*
   • webpack:///./* to ${workspaceFolder}/../ui-web-server/*
   • webpack:///src/* to ${workspaceFolder}/../ui-web-server/*
   • meteor://💻app/* to ${workspaceFolder}/../ui-web-server/*

If you're not using webpack or meteor you might have different source map paths.

To explore the structure of the source maps of my applications I use the Chrome Developer Tools. Under Sources you can easily navigate through them and discover the paths.

Here's an example launch.json.

{    "version": "0.2.0",    "configurations": [        {            "name": "Attach to something",            "type": "chrome",            "request": "attach",            "port": 9222,            "url": "http://localhost:8081/*",            "webRoot": "${workspaceFolder}/../Application",            "sourceMapPathOverrides": {                "webpack://Module/*": "${workspaceFolder}/Module/*"            }        }    ]}

Hope this helps a bit to understand it and to get it running.

I had the same problem today in Vue version 3 and using Vue CLI 3. The answer in this post didn't help. This solved it - https://github.com/microsoft/vscode-recipes/tree/master/vuejs-cli

Only include the preLaunchTask if you have created it (see the article above)

launch.json:

{  "version": "0.2.0",  "configurations": [    {      "type": "chrome",      "request": "launch",      "name": "vuejs: chrome",      "url": "http://localhost:8080",      "webRoot": "${workspaceFolder}",      "breakOnLoad": true,      "pathMapping": {        "/_karma_webpack_": "${workspaceFolder}"      },      "sourceMapPathOverrides": {        "webpack:/*": "${webRoot}/*",        "/./*": "${webRoot}/*",        "/src/*": "${webRoot}/*",        "/*": "*",        "/./~/*": "${webRoot}/node_modules/*"      },      "preLaunchTask": "vuejs: start"    }  ]}