I have searched far and wide but am unable to figure out how to get vscode to debug vanilla javascript included in a plain HTML page via chrome. I get "unbound breakpoint" for all breakpoints in all javascript files.
HTML is being served via the vscode Live Server plugin. The vscode debugger successfully attaches to chrome via the following launch.json. I can see the browser console in the debug console in vscode but all breakpoints are "unbound".
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"url": "http://127.0.0.1:3001/*",
"port": 9222,
"webRoot": "/_webroot",
"sourceMaps": false,
"trace": false
}
]
}
I have _webroot configured because that is the root of where Live Server is serving the files from. This seems to have no effect.
All javascript files are loaded at runtime in the browser via simple script tags such as:
<script src="js/customcode.js"></script>
I'm not using a package manager. No node involved at all.
Any help would be greatly appreciated.
Answering my own question. The solution was:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"url": "http://127.0.0.1:3001/*",
"port": 9222,
"webRoot": "${workspaceRoot}/_webroot",
"sourceMaps": false,
"trace": false
}
]
}