debugger for chrome插件已由microsoft整合进内置javascript debugger（vs code 1.85+默认启用），无需手动安装，应卸载旧插件；launch.json中type必须设为"pwa-chrome"，且需确保sourcemaps为true、webroot与构建产物路径匹配、chrome以--remote-debugging-port启动。
VS Code 要和 Chrome 建立有效调试关联，核心不是“装插件就自动连上”，而是三件事必须对齐：插件启用、launch.json 配置正确、Chrome 实例按协议启动。缺一不可，任意一步错，断点就失效。
Debugger for Chrome 插件现在叫什么？要不要重装？
Microsoft 已将 Debugger for Chrome 功能合并进默认启用的 JavaScript Debugger (Nightly)（VS Code 1.85+ 自带）。你不需要手动安装旧插件，也不该再搜“Debugger for Chrome”去装——它已废弃，且与新版冲突。
验证方式：
- 打开 VS Code 扩展面板（
Ctrl+Shift+X），搜JavaScript Debugger，确认状态是“已启用” - 在命令面板（
Ctrl+Shift+P）输入Debug: Open launch.json，能正常打开配置文件 → 说明调试器底层就绪 - 如果还装着旧版
Debugger for Chrome，请禁用或卸载，否则可能触发Cannot connect to runtime process错误
launch.json 里 type 字段该填 chrome 还是 pwa-chrome？
填 pwa-chrome。这是当前唯一推荐的 type 值。
原因很实际：
-
chrome类型已被标记为 legacy，VS Code 1.80 后不再维护，某些 ES 模块、动态import()或现代构建工具（Vite、Webpack 5+）下会断点不命中 -
pwa-chrome支持完整的 Chrome DevTools 协议，兼容 source map、Sourcemap v3、worker 调试、Service Worker 断点 - 配置示例（直接可用）：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
]
}
注意：sourceMaps 必须为 true，且你的构建工具（如 Vite、Webpack）输出的 .js.map 文件得真实存在并可被定位到。
为什么断点打了却没停？常见路径映射陷阱
最常踩的坑不是插件或配置，而是 webRoot 和实际源码位置不一致，或 source map 路径没对上。
典型表现：
- 断点显示为空心圆（
Unbound breakpoint） - Chrome 控制台报
Could not load content for webpack:///src/App.tsx - VS Code 调试时变量显示
undefined，但浏览器控制台能取到值
解决办法：
- 检查构建产物中
sourceMappingURL指向的路径，比如是webpack:///./src/...还是webpack:///src/... - 在
launch.json中加sourceMapPathOverrides显式修正，例如：
"sourceMapPathOverrides": {
"webpack:///./src/*": "${workspaceFolder}/src/*",
"webpack:///src/*": "${workspaceFolder}/src/*"
}
别依赖自动推导 —— Webpack/Vite 的默认 alias、monorepo 中的 packages/xxx 子路径、甚至 Windows 下的盘符大小写，都会让路径映射失败。
本地 HTML 文件调试：不用起服务也能断点
如果你只是调试一个独立的 index.html，不想跑 npm run dev，可以绕过服务器直接加载文件：
- 把
url换成file字段：
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch index.html",
"file": "${workspaceFolder}/index.html"
}
注意两点：
- Chrome 默认禁止从
file://协议加载本地脚本（CORS），所以 JS 必须内联写在<script></script>里，或确保启用了--allow-file-access-from-files（不推荐） - 更稳妥的做法：用
Live Server插件右键index.html→ “Open with Live Server”，然后用url模式连http://127.0.0.1:5500，这才是真实开发流
真正卡住人的从来不是“怎么装”，而是 Chrome 启动时是否带了调试端口、source map 是否生成、路径是否映射对——这三处任何一个出问题，VS Code 就只能看着断点变空心圆干瞪眼。
