VSCode 内置 JavaScript Debugger 已取代 Debugger for Chrome，需正确配置 webRoot、sourceMaps、skipFiles 三字段，并避免条件断点使用 ES6+ 语法及跨环境变量，日志断点仅支持纯字符串或模板字面量。
VSCode 自带的 JavaScript Debugger 已足够应对大多数排错场景，真正提升成效的不是“装更多插件”，而是用对核心插件、配准关键参数、避开常见映射断点失效问题。
为什么 Debugger for Chrome 插件现在基本不用了
VSCode 从 1.8x 版本起已将 JavaScript Debugger（简称 js-debug）作为内置调试器，不再依赖外部插件。旧版 Debugger for Chrome 插件在 2025 年底已停止维护，且与新版 Chromium 调试协议不兼容，启用后常导致：
-
Failed to launch browser或Cannot connect to runtime错误 - 断点命中但变量显示为
undefined（源码映射失败） - 热重载后断点自动消失，且无法恢复
如果你的 launch.json 里还写着 "type": "chrome"，请立刻改成 "type": "pwa-chrome" 或直接删掉插件——js-debug 会自动接管。
launch.json 中必须设对的三个字段
断点无效、变量看不到、跳转错文件，90% 源于这三个字段配置偏差：
-
"webRoot"：必须指向浏览器实际加载 HTML 的根路径，不是项目根目录。比如用 Live Server 启动时地址是http://127.0.0.1:5500/src/index.html，那webRoot应设为"${workspaceFolder}/src" -
"sourceMaps"：TypeScript 或 Webpack/Vite 构建项目必须显式开启。若构建产物无.map文件，或路径未被devtool正确生成，断点永远打不到源码行 -
"skipFiles"：默认值["<node_internals>/**"]</node_internals>会跳过所有 Node 内部模块，但若你调试的是 Electron 或自定义 require 加载逻辑，需手动剔除干扰项，否则调用栈卡在internal/modules/cjs/loader.js就停住
条件断点别写成 JS 表达式语法错误
VSCode 条件断点底层用的是 V8 的调试表达式引擎，它不支持 ES6+ 语法糖，也不执行完整作用域链查找。常见翻车写法：
- 写
user?.id === 123→ 报错Unexpected token '.'（可改用user && user.id === 123） - 写
Array.isArray(data)→ 可能报ReferenceError: Array is not defined（V8 表达式上下文极简，只暴露当前作用域变量和全局基础对象） - 写
process.env.NODE_ENV === 'development'→ 在浏览器环境根本没process（条件断点运行在目标运行时，不是 VSCode 进程）
稳妥做法：只用简单布尔表达式，如 i > 100、response.status !== 200、typeof data === 'object'。
日志断点输出被吞？检查 debug console 输出级别
日志断点（Logpoint）内容默认输出到 Debug Console 面板，但该面板默认只显示 log 级别及以上消息。如果你的日志断点写的是 console.warn('{msg}') 或 console.error(...)，它们不会出现在面板里——因为那是浏览器控制台行为，不是调试器日志流。
正确写法只有两种：
- 纯字符串：
User {id} clicked, count = {count} - 表达式包裹：
`${user.name} logged in at ${new Date().toISOString()}`（注意：仅支持模板字面量语法，不支持函数调用）
输出内容不会触发浏览器 console，也不会影响代码执行流程，但一旦写错语法，整行日志就静默丢弃，毫无提示。
最易被忽略的其实是 webRoot 和构建产物中 sources 字段的路径一致性——哪怕只差一个 ./ 或大小写，source map 就完全失效，断点变成“装饰品”。调完一整天 bug 却发现只是路径少了个斜杠，这种事真发生过太多次。
