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

Question

I am trying to launch the chrome debugger from vscode, but my breakpoints are being passed over and I get the message 'breakpoint set but not yet bound'. I suspect that this is because I have the wrong value for the webRoot property in the launch config.

Documentation on the webRoot property states: 'This specifies the workspace absolute path to the webserver root. Used to resolve paths like /app.js to files on disk. Shorthand for a pathMapping for "/"'

I am trying to debug some react components, and I am working within a microservice architecture so my server is a sibling directory of the one I am working in. Therefore, I tried to set the webRoot as "${workspaceFolder}/../ui-web-server".

My question is what is the webRoot property (the definition in the documentation is ambiguous to me) and how does chrome debugger use this property under the hood.

Answer 1

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.