vscode自带javascript debugger即可调试浏览器页面，关键在launch.json配置匹配运行方式：本地文件用file字段、本地服务器用url字段，且webroot必须指向源码目录、sourcemappathoverrides需适配构建工具路径映射。
直接结论：不用装一堆插件，VSCode 自带 JavaScript Debugger 就能调试浏览器页面，关键在 launch.json 配置是否匹配你的运行方式（本地文件 or 本地服务器）。
为什么用 Debugger for Chrome 插件反而容易出错
这个插件早在 2022 年就已合并进 VSCode 内置的 JavaScript Debugger（Nightly 版本也已停更）。继续手动安装旧版 Debugger for Chrome 可能导致：
- 与新版 VSCode 调试协议不兼容，
F5启动后报错Cannot connect to runtime process - 断点失效，或只停在混淆后的代码里
- source map 映射失败，调试时看不到原始
.ts或.jsx文件
✅ 正确做法：确认 VSCode 是 1.75+ 版本 → 不额外安装任何调试插件 → 直接配置 .vscode/launch.json。
launch.json 两种写法必须区分清楚
你打开的是本地 HTML 文件（file:// 协议），还是通过 http://localhost:xxx 访问的服务？这决定了 type 和 url 的取值，混用必失败。
✅ 本地静态文件调试（比如双击打开 index.html）：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch HTML (file)",
"file": "${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
✅ 本地服务器调试（如用 Live Server、vite dev、npm start）：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Dev Server",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${workspaceFolder}/src/*"
}
}
]
}
⚠️ 注意：webRoot 必须指向你源码所在目录，否则断点无法映射；sourceMapPathOverrides 在使用构建工具时几乎必填，否则调试器找不到原始文件。
常见错误现象和对应解法
遇到这些情况，别急着重装插件，先核对配置：
-
Unable to launch browser: Error: spawn UNKNOWN→ 检查系统是否真装了 Chrome，且路径没被杀毒软件拦截；Windows 上可加"runtimeExecutable": "C:\Program Files\Google\Chrome\Application\chrome.exe" - 断点灰色、提示
Unbound breakpoint→ 确认webRoot正确；检查 HTML 中 script 标签是否带type="module"但没生成 source map - 控制台报
Failed to load source map→ 构建工具（如 Vite/Webpack）需开启build.sourcemap: true或devtool: 'source-map' - 修改 JS 后刷新页面断点消失 → 这是热更新干扰，可在调试时临时关闭 HMR，或改用
request: "attach"模式连接已打开的 Chrome 实例
真正卡住的地方往往不是插件装没装，而是 webRoot 指向了构建产物目录（如 dist）而不是源码目录，或者 url 和实际服务地址不一致——这两个参数错一个，调试就彻底失效。
