无包管理器场景下VSCode通过Chrome调试原生JS出现未绑定断点

核心问题原因 #

你当前配置中的webRoot参数填写错误，/_webroot是Live Server的内部虚拟服务路径，VSCode调试器需要的是本地项目的物理根目录，路径映射不匹配就会导致断点无法绑定。

第一步：修正launch.json配置 #

以下是正确的attach模式配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "url": "http://127.0.0.1:3001/*",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": false,
      "trace": false
    }
  ]
}

${workspaceFolder}是VSCode内置变量，自动指向你当前打开的工作区根目录，也就是Live Server的文件服务根目录，能正确建立本地文件和浏览器加载资源的路径映射。

使用attach模式需要提前以开启远程调试端口的方式启动Chrome：

• Windows：右键Chrome快捷方式选择「属性」，在「目标」一栏的末尾添加 --remote-debugging-port=9222，保存后通过该快捷方式启动Chrome
• Mac：终端执行命令 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
• Linux：终端执行命令 google-chrome --remote-debugging-port=9222

可选：更简单的launch模式（无需手动配置Chrome启动参数） #

如果不想每次开调试都手动启动带端口的Chrome，可以直接用launch模式，配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome for Debug",
      "url": "http://127.0.0.1:3001/你的页面路径.html", // 替换为你实际要调试的HTML页面地址
      "webRoot": "${workspaceFolder}",
      "sourceMaps": false
    }
  ]
}

操作验证步骤 #

1. 启动Live Server，确认服务端口为3001，和配置中的url端口一致
2. 启动VSCode调试，打开对应的HTML页面
3. 在本地JS文件中设置断点，刷新页面即可触发断点命中

常见问题排查 #

• 确认本地项目根目录下存在和script标签src路径匹配的JS文件，比如示例中就是根目录下js/customcode.js路径真实存在
• 不要使用Chrome隐私模式，会阻止调试器挂载
• 若仍有问题，可将配置中trace改为true，在VSCode调试控制台查看路径映射日志，定位映射错误

内容的提问来源于stack exchange，提问作者bfeist