VSCode浏览器联动调试需VS Code配置、Chrome调试端口、sourceMap路径三者严格对齐；必须用内置JavaScript Debugger、type为"pwa-chrome"、url与浏览器地址栏完全一致、webRoot指向源码根目录、Chrome命令行启动并暴露调试端口，缺一则断点变空心圆。
VSCode 浏览器联动调试不是“装个插件点一下就通”，而是三者必须对齐：VS Code 的 launch.json 配置、Chrome/Edge 的远程调试端口、以及构建工具生成的 sourceMap 路径映射。缺一不可，错一个字段断点就变空心圆。
确认用的是内置 JavaScript Debugger，不是旧版 Debugger for Chrome
VS Code 1.85+ 已将调试能力整合进默认启用的 JavaScript Debugger (Nightly)，旧版 Debugger for Chrome（尤其是 v4.x 或带 legacy 字样的）会直接冲突，导致 Unable to launch browser: unknown error 且无提示。
- 打开扩展面板（
Ctrl+Shift+X），搜JavaScript Debugger，确认状态为“已启用” - 卸载所有名称含
Chrome Debugger、legacy或发布者非 Microsoft 的类似插件 - 命令面板中运行
Debug: Open launch.json能正常打开 → 底层调试器就绪
launch.json 中 type 必须是 pwa-chrome，不是 chrome
chrome 类型已被标记为 legacy，1.80 后不再维护；现代构建（Vite、Webpack 5+）、ES 模块、动态 import() 下大概率断点不命中。只有 pwa-chrome 支持完整 DevTools 协议，包括 worker、Service Worker 和 sourcemap v3。
- 配置示例（直接可用）：
{ "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}", "sourceMaps": true } ] } -
url必须和浏览器地址栏**完全一致**：协议（http://，不能是file://）、端口（:5173）、路径（/login末尾斜杠）、哈希（#home）都要匹配 -
webRoot指向你编辑的源码根目录，比如"${workspaceFolder}/src"—— 若断点打在打包后代码里，就是这里错了
Chrome 必须用命令行启动并暴露调试端口
双击图标打开的 Chrome 默认关闭远程调试协议，VS Code 连不上就会卡在 Could not connect to localhost:9222。这不是配置问题，是 Chrome 根本没暴露接口。
- 先关掉所有 Chrome 进程：
taskkill /f /im chrome.exe（Windows）或pkill -f "chrome.*9222"（macOS/Linux） - 用命令行启动：
chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug（--user-data-dir是必须的，否则拒绝以调试模式复用主配置） - 如果
9222被占，换端口如9223，但仅request: "attach"模式才需在launch.json显式写port字段
sourceMap 必须真实存在且路径可定位
断点灰掉、跳到压缩后代码、Sources 面板看不到 webpack:// 或 vite:// —— 全是 sourceMap 没生效的表现。VS Code 不会猜路径，它只按配置去读 .map 文件。
- Vite 项目：确认
vite.config.ts中build.sourcemap: true（推荐build.sourcemap: 'inline'，避免路径解析失败） - Webpack 项目：
devtool: 'source-map'或'inline-source-map'，别用'eval'类型 - 检查浏览器 DevTools → Sources 面板能否展开原始源码；不能 → 构建阶段就没输出有效 map
- 若构建产物在
dist/，而源码在src/，可在launch.json加"sourceMapPathOverrides": { "webpack:///src/*": "${workspaceFolder}/src/*" }
最容易被忽略的是 url 和 webRoot 的路径粒度——差一个斜杠、少一个 src/ 前缀，VS Code 就找不到断点对应的源文件。这不是玄学，是字面量匹配。调试器不会自动纠错，它只忠实地执行配置。
