vscode chrome调试与香草JS和没有包管理器-未绑定的断点

Question

我已经搜索了很远，但我无法弄清楚如何得到vscode调试香草javascript包含在一个普通的HTML页面通过chrome。得到"未绑定断点"对于所有javascript文件中的所有断点。

HTML是通过vscode Live Server插件提供的。vscode调试器通过下面的launch.json成功地附加到chrome上。我可以在vscode的调试控制台中看到浏览器控制台，但是所有的断点都是"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
}
]
}

我配置了_webroot，因为这是Live Server提供文件的根目录。这似乎没有效果。

所有的javascript文件都是在浏览器运行时通过简单的脚本标签加载的，比如:

<script src="js/customcode.js"></script>

我没有使用包管理器。不涉及任何节点

任何帮助都将是非常感激的。

Answer 1

回答我自己的问题。解决方案是:

{
"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
}
]
}