Debugger for Chrome是当前最稳定、兼容性最好、问题最少的VS Code浏览器调试插件，尤其适配React/Vue/Vite/Next.js等主流前端项目；它依托Chrome成熟的DevTools协议，官方维护及时，Source Map映射准确率高，配合Console Ninja可实现日志监控与断点调试互补协同。
Debugger for Chrome 是目前最顺手、兼容性最好、问题最少的 VS Code 浏览器调试插件，尤其适合 React/Vue/Vite/Next.js 等主流前端项目。它不是唯一选择，但绝大多数真实项目里，它比 Debugger for Firefox 或第三方替代方案更稳、更省心。
为什么选 Debugger for Chrome 而不是其他？
不是因为 Chrome 多好，而是它的 DevTools 协议最成熟、VS Code 官方维护最及时、Source Map 映射错误最少。Firefox 插件常卡在 sourcemap 路径解析上，尤其是用 Vite 构建时，sourceRoot 和 sources 字段稍有偏差就断点不命中；而 Chrome 插件对 webpack-dev-server 和 vite dev server 的路径映射逻辑更宽容。
常见现象：Debugger for Firefox 启动后控制台能连上，但断点灰色不可用，launch.json 里加了 sourcemaps: true 也没用——大概率是 Firefox 的调试协议没正确识别 outDir 或 sourceMapBasePath。
-
Debugger for Chrome默认支持localhost+http://协议，开发环境几乎零配置就能用 - 遇到 HTTPS 本地服务（比如某些云厂商 mock 环境），只需加一行：
"debug.chrome.ignoreHttpsErrors": true - 配合
webpack或vite时，webRoot填"${workspaceFolder}"就够，不用手动算构建后路径
launch.json 配置最容易错的三个地方
断点不触发、变量看不到、跳转源码失败，90% 出在以下三处：
-
url必须和浏览器实际打开的地址完全一致（包括端口、路径）。比如你用vite默认开在http://localhost:5173，但url写成http://127.0.0.1:5173，断点就失效 -
webRoot不是代码根目录，而是「浏览器请求资源时，服务返回的文件相对于哪个路径」。Vite 项目填"${workspaceFolder}"；Create React App 填"${workspaceFolder}/public"；Next.js 则要填"${workspaceFolder}/.next"（否则找不到_next/static/chunks下的 sourcemap） -
sourceMapPathOverrides这个字段很多人忽略，但它决定「浏览器里看到的webpack://./src/App.tsx能否映射回你本地的src/App.tsx」。Vite 用户基本不用配；Webpack 用户建议加上："webpack:///./*": "${workspaceFolder}/*"
Chrome 插件和 Console Ninja 怎么搭配用？
Console Ninja 解决的是「日志在哪看」的问题，Debugger for Chrome 解决的是「代码在哪停、变量怎么查」的问题——它们不冲突，反而互补。
典型工作流：Console Ninja 在编辑器里实时刷出 console.log 和报错堆栈，你一眼看到哪行出问题；然后直接在对应代码行打断点，用 Debugger for Chrome 进入单步调试，查作用域、改变量值、看调用栈。
-
Console Ninja不需要启动调试会话，只要项目跑着（vite dev/npm start），它就能捕获输出 -
Debugger for Chrome必须通过F5启动一个调试会话，它会拉起新 Chrome 实例或 attach 到已有实例 - 两者同时启用时，
Console Ninja的日志不会干扰断点，但注意：如果用了console.time()或console.group()，Console Ninja的折叠逻辑可能让堆栈显示不全，这时切到 Chrome DevTools 的 Console 面板看原始输出更可靠
别指望它能调试 Service Worker 或 WebExtension
Debugger for Chrome 对普通网页页面调试非常稳，但遇到 Service Worker、Manifest V3 扩展背景页、或者 Electron 渲染进程，就得换方案。
Service Worker 断点必须在 Chrome DevTools 的 Application → Service Workers 面板里手动「Update on reload」并勾选「Enable update on reload」，VS Code 插件根本没法 attach 上去；WebExtension 的 background script 要用 chrome-extension:// 协议，url 字段不支持这种 scheme，得靠 Debugger for Edge 或直接进 chrome://extensions 开启开发者模式手动调试。
这些边界场景，插件文档不会明说，但实际踩坑时你会发现 launch 配置再完美也连不上——这时候别硬调，直接切到浏览器 DevTools 更快。
