盘点VSCode插件中浏览器调试神器-VSCode-PHP中文网

debugger for chrome配置失败主因是launch.json路径映射错乱：webroot须指向运行时根目录而非源码目录，sourcemappathoverrides需匹配构建路径，chrome端口冲突或sourcemap未生成亦会导致断点不命中。

盘点vscode插件中浏览器调试神器

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 的完整性和执行时机。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

确保你在「执行到该行之后」再看变量面板，函数还没进、异步还没 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 请求地址，反推映射关系

真实调试里最耗时间的，从来不是装插件，而是确认当前页面到底加载的是哪份 JS、sourcemap 是否真的被浏览器识别、以及断点所在的那一行有没有被 tree-shaking 掉。别急着重装插件，先打开浏览器的 DevTools → Sources → Page，看看左边树里有没有你的 src 文件夹。没有，就回头查构建配置；有但断点灰掉，就查 sourcemap 路径映射。