根本原因是Chrome未启用远程调试端口或调试配置与运行环境不匹配；需确保Chrome以--remote-debugging-port=9222启动、launch.json中url指向http地址而非file://、webRoot设为浏览器请求资源的本地路径，并使用VSCode内置js-debug替代已停更的Debugger for Chrome插件。
Chrome DevTools 无法连接到 VSCode 怎么办
根本原因通常是 Chrome 浏览器未启用远程调试端口，或插件启动配置与实际运行环境不匹配。Debugger for Chrome 不是自动监听网页的“万能钩子”，它依赖你明确告诉它：要连哪个 Chrome 实例、加载哪个 HTML 文件、是否用本地服务器。
常见错误现象：Unable to attach to Chrome、Cannot connect to runtime process、断点灰色不可用。
- 确保 Chrome 完全退出（包括右下角任务栏隐藏进程），再以远程调试模式启动：
chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome-debug" - VSCode 中
launch.json的url必须指向已打开的页面地址（如http://localhost:3000/index.html），不能写成本地文件路径file:///...（除非显式设file://协议并配webRoot） - 若用
webpack-dev-server或 Vite，优先选launch类型为chrome+url，而非attach；后者需手动在 Chrome 地址栏输入chrome://inspect并确认目标页已列在 Remote Target 下
launch.json 中 webRoot 配置为什么总报错
webRoot 是 Debugger for Chrome 定位源码映射（source map）的关键路径，不是“网页根目录”，而是 VSCode 工作区中对应浏览器请求资源的**本地文件系统路径**。配错会导致断点打在压缩后代码上，或直接失效。
使用场景：前端项目构建后输出 dist/，但你在 src/ 里写代码，浏览器通过 http://localhost:5000/ 加载 dist/index.html，此时 webRoot 应指向 dist 目录（因为浏览器请求的是它），而 source map 的 sources 字段必须能从该路径回溯到 src/ 文件。
- 开发时用
webpack-dev-server：通常设"webRoot": "${workspaceFolder}"，前提是 dev server 把index.html和打包资源都映射到根路径 - 静态文件服务（如
serve -s dist）：设"webRoot": "${workspaceFolder}/dist"，且确保dist内有正确的*.map文件，并被浏览器成功加载（检查 Network 面板中的main.js.map状态） - 如果浏览器控制台报
Could not load content for webpack:///...，说明 source map 的sources路径和webRoot不匹配，可临时加"sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/src/*" }修正
为什么修改代码后断点失效或跳转错行
本质是 source map 未生效或版本错乱。Debugger for Chrome 依赖浏览器加载的 JS 文件中 //# sourceMappingURL=xxx.map 注释，以及该 .map 文件内容的准确性。任何一环断裂，断点就失去源码关联。
- 检查浏览器 Network 面板：过滤
js，点击你的脚本文件 → Response 标签页末尾是否有sourceMappingURL=？没有则构建配置漏了devtool: 'source-map'（Webpack）或build.sourcemap: true（Vite） - 确认 .map 文件可访问：在浏览器直接访问
http://localhost:3000/js/app.js.map，应返回 JSON 内容，且其中sources数组里的路径能被webRoot正确解析 - 热更新（HMR）时常见问题：Webpack Dev Server 默认用
eval-source-map，这种 map 不支持 VSCode 调试；必须显式设devtool: 'source-map'或'inline-source-map' - VSCode 缓存旧 map：改完构建配置后，关掉所有 Chrome 窗口 + 重启 VSCode，否则可能沿用之前缓存的无效映射
用 Edge 或新版 Chrome（Chromium 内核）还需要装这个插件吗
不需要。VSCode 1.84+ 原生支持 ms-vscode.js-debug（内置），它已取代 Debugger for Chrome 插件，同时兼容 Chrome、Edge、Electron、Node.js 等多种运行时。旧插件不仅停止维护，还会与内置调试器冲突，导致 Cannot connect to the target 等随机失败。
- 卸载
Debugger for Chrome插件（作者：msjsdiag） - 检查 VSCode 设置中
debug.javascript.usePreview是否为true（默认已是） - 新建
.vscode/launch.json时选择Chrome或Edge环境，VSCode 自动生成基于pwa-chrome或pwa-msedge的配置，不再需要type: "chrome" - 如果仍要用旧配置迁移：把
"type": "chrome"改成"type": "pwa-chrome"，删掉"request": "attach"中的port（新版自动探测），并确保 Chrome 启动参数含--remote-debugging-port=9222
真正麻烦的从来不是配对端口或写 launch.json，而是搞清 source map 的生成路径、浏览器请求路径、VSCode 本地路径三者之间怎么对齐——这三者差一个斜杠或少一层 ../，断点就永远灰着。
