Visual Studio Code中断点无法触发，问题出在哪里？

首先修正launch.json的配置冲突 #

你的配置里同时存在url和file字段，这两个参数互斥，会导致调试映射异常：

• 如果是通过本地服务器（如http://localhost:8080）访问页面，保留url和webRoot，移除file字段：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
}

• 如果是直接打开本地静态文件，保留file，移除url字段：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome local file",
    "file": "${workspaceFolder}/index.html"
}

其他排查要点 #

• 确认本地服务器（如live-server、http-server）确实在8080端口运行，且页面能正常访问，服务器根目录需和webRoot一致，否则会导致断点无法映射到正确的文件。
• 清除浏览器缓存：在Chrome调试工具的Network面板勾选「Disable cache」，或强制刷新页面（Ctrl+Shift+R），避免浏览器加载旧的JS文件。
• 验证断点位置：确保断点设置在会被执行的代码上，避开死代码、未触发的条件分支，异步代码需等待执行到对应时机。
• 确认调试配置：在VSCode的「Run and Debug」面板中，选中你定义的调试配置项再启动调试。
• 必须通过VSCode启动Chrome：只有通过调试按钮启动的Chrome窗口，才会和VSCode建立调试连接，手动打开的浏览器无法触发断点。

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