VS Code 通过 pwa-chrome 调试器实现浏览器内断点调试，需 Chrome 启动时指定 --remote-debugging-port 并配置匹配的 launch.json，确保 url、webRoot 和 sourceMapPathOverrides 正确映射源码路径。
VS Code 本身不直接运行浏览器，但通过 Debugger for Chrome 扩展（现为 Chrome Debugger，已整合进官方 JavaScript Debug Terminal）可以实现在编辑器内断点、单步、查看作用域和调用栈——前提是 Chrome 启动时开启远程调试端口，且 VS Code 的 launch.json 配置与实际服务路径、端口、URL 完全匹配。
确认 Chrome 已启用远程调试端口
VS Code 调试依赖 Chrome 的 --remote-debugging-port=9222 启动参数。直接双击图标打开的 Chrome 默认不启用该功能，会导致连接失败并报错 Unable to launch browser: "Could not connect to localhost:9222"。
- 关闭所有 Chrome 进程（包括后台任务栏小图标，Windows 可用
taskkill /f /im chrome.exe） - 用命令行启动带调试端口的 Chrome：
chrome.exe --remote-debugging-port=9222 --user-data-dir="C:/tmp/chrome-debug"
（macOS/Linux 替换为google-chrome，路径按需调整） -
--user-data-dir是必须的，否则 Chrome 拒绝以调试模式复用主配置目录 - 端口可换，但必须和后续
launch.json中的port一致
配置 .vscode/launch.json 启动调试会话
关键不是“能打开网页”，而是让 VS Code 知道：代码在哪、网页跑在哪个 URL、怎么把断点映射到源码。常见错误是 url 写成 file:/// 本地路径，或没配 webRoot 导致断点灰色不可用。
- 项目根目录下建
.vscode/launch.json，内容示例（适配http://localhost:5173的 Vite 项目）：{ "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" } } ] } -
type必须是pwa-chrome（旧版chrome已弃用） -
webRoot指向你源码所在文件夹，用于将 Chrome 加载的http://localhost:5173/src/main.js映射回本地src/main.js - Vite / Webpack 项目通常需要
sourceMapPathOverrides，否则断点无法命中；具体值取决于构建工具生成的 sourcemap 中的sources字段内容
调试时断点不生效？检查这三个映射环节
断点变空心圆（未绑定），本质是 VS Code 找不到对应源码位置。问题一定出在路径映射链上：Chrome 加载的资源 URL → sourcemap 中记录的原始路径 → launch.json 里声明的本地路径。
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome DevTools 的
Sources面板中右键某个 JS 文件 →Reveal in Explorer，看它显示的路径是不是你项目里的真实路径 - 如果显示的是
webpack://./src/App.vue，说明 sourcemap 用了 webpack 协议前缀，此时sourceMapPathOverrides应设为"webpack://./src/*": "${webRoot}/src/*" - 如果用的是
vite，sourcemap 常含file:///绝对路径，可尝试："sourceMapPathOverrides": { "file:///*": "/*" } - 确保浏览器访问的是
http://localhost:5173（而非http://127.0.0.1:5173），因为协议+域名必须完全一致才能触发映射
为什么推荐用 pwa-chrome 而非直接 attach？
attach 模式要求 Chrome 已提前运行且开启调试端口，适合调试已有页面或复杂多页场景；但日常开发更常用 launch 模式——它会自动拉起 Chrome 实例，并保证环境干净（无插件干扰、独立用户数据）。更重要的是：launch 模式下 VS Code 能接管整个生命周期，包括自动重载后重新绑定断点，而 attach 在页面刷新后常需手动重新连接。
真正容易被忽略的是：Chrome 调试协议（CDP）版本与 VS Code 内置的调试适配器存在兼容性。如果你用的是较新 Chrome（v120+）但 VS Code 版本低于 1.85，可能触发 Protocol error (Page.navigate): Target closed 类错误——此时不要折腾配置，先升级 VS Code。
