Debugger for Chrome配置失败主因是launch.json路径映射错乱：webRoot须指向运行时根目录而非源码目录，sourceMapPathOverrides需匹配构建路径，Chrome端口冲突或sourcemap未生成亦会导致断点不命中。
Debugger for Chrome 配置失败常见报错怎么修
直接启动失败、断点不命中、源码映射错乱，基本都卡在 launch.json 配置或路径映射上。关键不是写对格式，而是让 VS Code 知道「哪段构建后的代码对应你编辑的哪个源文件」。
-
"webroot"必须指向实际运行时根目录（比如"${workspaceFolder}/public"），不是源码目录；若用 webpack-dev-server，默认是"${workspaceFolder}" -
"sourcemaps"设为true后，必须确保构建产物里包含.map文件，且 dev-server 开启了devtool: 'source-map'或类似配置 - Chrome 启动时若提示
Unable to attach to process，大概率是端口被占，检查"runtimeArgs"中的--remote-debugging-port=9222是否冲突，换 9223 试试 - 断点打在 JSX/TSX 里却跳到 bundle.js？补上
"sourceMapPathOverrides"映射规则，例如：{"webpack:///./src/*": "${webroot}/src/*"}
为什么断点进了但变量看不到
不是插件坏了，是调试上下文没加载全。Chrome DevTools 和 VS Code 调试器共享同一套 V8 引擎，但变量作用域展示依赖 sourcemap 的完整性和执行时机。
- 确保你在「执行到该行之后」再看变量面板，函数还没进、异步还没 resolve，变量自然为空
- React/Vue 组件内使用
useEffect或mounted时，断点设在钩子内部才有效；设在组件顶层，可能因模块初始化顺序看不到 state - 如果变量名被压缩（如
_a），说明构建时开启了 mangle，关掉terser的compress.mangle或加keep_fnames: true - VS Code 的「调试控制台」里输入
this.state或props可能报 undefined —— 这是正常现象，改用「变量」面板或 hover 查看作用域变量
Live Server + Debugger for Chrome 能一起用吗
能，但得绕开默认端口冲突和自动刷新干扰。Live Server 默认跑在 5500，Debugger for Chrome 默认连 3000，强行共用一个服务容易丢断点。
- Live Server 启动后，手动在
launch.json中把"url"改成"http://localhost:5500/index.html"，并关闭 Live Server 的「自动刷新」（设置里关掉"liveServer.settings.donotShowInfo"不管用，要关"liveServer.settings.AdvanceCustomBrowserCmdLine"相关项） - 更稳的做法：停用 Live Server，改用
npm start启动官方脚手架（Create React App / Vite），再配 Debugger for Chrome 连http://localhost:3000—— 官方 dev server 对 sourcemap 和 HMR 更友好 - 别在 Live Server 页面里右键「Open with Live Server」后再点调试按钮，这会触发两次页面加载，断点只在第一次生效，第二次就丢了
Firefox 调试比 Chrome 更难配？
不是更难，是路径映射规则不同。Firefox 的 debugger for firefox 插件底层用的是 firefox-debugger 协议，对构建路径更敏感。
-
"pathMapping"是核心字段，Chrome 用"sourceMapPathOverrides"，Firefox 必须用"pathMapping"，格式为{"webpack:///": "${webroot}/"} - Firefox 默认不加载本地 file:// 协议的 sourcemap，所以不能直接打开 html 文件调试；必须走 http://，哪怕只是
python -m http.server 8000 - 遇到
Source map error: Error: request failed with status 404，八成是pathMapping没覆盖到实际 .map 文件路径，用浏览器 Network 面板查 404 的 map 请求地址，反推映射关系
