VSCode 的 JavaScript Debugger 是内置调试器，断点不生效主因是 launch.json 中 type 字段错误；变量显示 undefined 源于 sourceMap 配置不匹配；hover 查看变量值更高效；调试框架组件需关注模板绑定与上下文激活。

VSCode 自带的 JavaScript Debugger 插件已经深度集成，无需额外安装——它从 2020 年起就作为 VSCode 内置调试器存在，直接启用即可用，不是第三方扩展。

为什么断点不生效？检查 launch.json 的 type 字段

常见现象是：打了断点，F5 启动后却直接跑完、没停住。根本原因往往是 launch.json 中的 type 值写错了。

• type: "node" —— 用于调试 Node.js 脚本（如 node app.js）
• type: "pwa-node" —— 用于现代 Node.js 环境（支持 ES modules、source map 更准、支持 await 在 REPL 中调试）
• type: "pwa-chrome" —— 用于调试浏览器中运行的 JS（需配合 url 或 file 路径）

如果你用的是 import / export 或 top-level await，必须用 pwa-node；否则断点会跳过或报 Breakpoint ignored because generated code not found。

调试时变量显示为 undefined？确认 sourceMap 配置是否匹配

尤其在使用 TypeScript 或 Webpack/Babel 构建项目时，调试器找不到原始源码，就会显示空值或乱码。

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

• TS 项目：确保 tsconfig.json 中有 "sourceMap": true，且编译输出目录（outDir）与 launch.json 中的 outFiles 路径一致
• Webpack 项目：检查 devtool 设为 "source-map" 或 "inline-source-map"，避免用 "eval" 类型
• Node.js v18.17+ 默认启用 --enable-source-maps，但若手动启用了 node --no-source-maps，调试器将彻底失效

想看 console.log 旁边实时值？用 debug hover 而非打断点

很多开发者习惯在关键行加 console.log(x)，再打断点去 inspect 变量——其实更轻量的方式是悬停。

• 把光标停在任意变量名（如 data）、表达式（如 arr.filter(Boolean)）或对象属性（如 user.name）上
• 等待 0.3 秒左右，VSCode 会弹出 tooltip 显示当前求值结果（含类型、长度、展开结构）
• 对异步值（如 await fetch(...)），hover 会显示 Pending 或 resolved 值，比打断点更少干扰执行流

这个行为依赖 JavaScript Debugger 的 runtime evaluation，默认开启，禁用后 hover 就只剩类型提示。

调试 Vue/React 组件逻辑时，别只盯着 script 标签

前端框架组件里，逻辑常分散在模板响应式绑定、生命周期钩子、Composition API 的 ref/reactive 中——单纯在 setup() 打断点可能漏掉触发源头。

• Vue：在 .vue 文件的 <template> 区域点击任意绑定表达式（如 {{ count + 1 }}），悬停可看到当前值；右键选择 “Debug in Console” 可直接进入该上下文执行环境
• React：在 JSX 中 hover {items.map(...)} 会显示数组长度和前几项；配合插件 Volar（Vue）或 ESLint + typescript-eslint，能定位到 useState 更新链路
• 注意：这些能力需要项目已正确配置 jsconfig.json 或 tsconfig.json，否则 hover 仅显示 any

真正影响调试效率的，往往不是“能不能断点”，而是“断在哪、看什么、怎么信”。sourceMap 错配、runtime evaluation 被关、框架上下文未激活——这三个点卡住，再 fancy 的 UI 也白搭。