VS Code断点调试需满足三要素：断点打在实际执行的语句上（如if(true)内而非if(false)）、TypeScript需启用sourceMaps、控制台表达式限于当前作用域；变量面板仅显示引用快照，深层结构需手动展开或用JSON.stringify格式化。
VS Code 的断点调试不是“打开就灵”，关键在于理解 debugger 触发时机、variables 面板数据来源，以及控制台输入表达式时的执行上下文。
断点打在哪才真正生效？
断点必须打在可执行语句上，且代码需被实际运行到。常见失效场景：
-
console.log前加断点有效，但写在未执行的if (false)块里就永远不触发 - 异步代码中（如
setTimeout、fetch回调），断点要打在回调函数内部，而非调用语句后 - TypeScript 项目需确认
sourceMap已启用（"sourceMaps": true在launch.json中），否则断点会错位到编译后的 JS 行
调试控制台里输什么才有用？
控制台默认运行在当前暂停帧（stack frame）的作用域内，不是全局环境。能直接访问的变量仅限于当前函数作用域及闭包链上的变量：
- 输
myVar可读值，但输window.myVar可能报ReferenceError（若该变量非全局声明） - 可调用当前作用域内定义的函数，如
processData(input)，但不能调用未加载或未定义的模块方法 - 支持简单赋值（
count = 10）和表达式（arr.filter(x => x > 5)），但不支持let/const声明（会报语法错误）
为什么变量面板显示 undefined 或 Object 而不是具体内容？
这是常见误解：变量面板只展示引用快照，深层结构需手动展开。尤其注意：
- Promise 对象默认显示
Pending，需在控制台输入await myPromise查看结果（仅限 async 暂停帧） - DOM 元素显示为
HTMLDivElement，点击右侧小箭头才能展开属性；直接输el.innerHTML可快速查看 - 大型数组/对象可能被截断，右键变量 → “Store as global variable” 生成临时变量
temp1，再用JSON.stringify(temp1, null, 2)格式化输出
最易忽略的是：断点触发后，如果跳过某次循环或条件分支，变量面板不会自动刷新历史值——它只反映当前帧的实时状态，不是时间旅行调试器。
