WebStorm调试面板显示由调试会话类型、运行配置和上下文共同决定；选错配置（如Node.js配HTML页面）、未连Chrome、缺失source map、代码压缩或异步作用域限制均会导致Variables/Console不显示或值为undefined。
WebStorm 调试器界面不是靠“打开设置 → 点一堆勾”就能调好的，而是由调试会话类型、运行配置和当前上下文共同决定显示哪些面板——你改了设置却没看到 Watches 或 Console，大概率是选错了配置类型，或者根本没连上调试器。
为什么 Debug 工具窗口里没有 Variables 或 Console 面板？
这不是面板被隐藏了，而是当前调试会话压根不支持这些数据视图。常见原因：
- 运行配置选成了
Node.js，但你在调试一个 HTML 页面——该配置只启动 Node 进程，不会加载浏览器上下文，Console里只有process.stdout输出，没有console.log或 DOM 交互能力 - 运行配置是
JavaScript Debug，但右下角没显示Debugger connected或Connected to Chrome——说明 Chrome 插件未响应，或 URL 不在 WebStorm 内置服务域（如用了file://协议或自定义本地服务器） - 调试的是 TypeScript 且未启用 source map，断点落在编译后 JS 上，调试器无法映射回 TS 文件，导致变量面板显示空或原始名丢失
如何让 Variables 面板显示真实值而非 undefined？
悬停看变量不准，不是界面 bug，是 V8 调试器作用域限制 + 构建干扰的组合结果：
- 异步回调（
setTimeout、Promise.then、事件监听器）中闭包变量无法实时读取——别依赖悬停，改在回调第一行设断点，再查Variables面板 - 构建工具开启
mangle（如 Terser 的compress.mangle = true），函数参数变成a、t——开发阶段必须关掉，否则Variables面板里看不到原始变量名 - 想查 Promise 中间状态？暂停时右键变量 →
Evaluate Expression，输入await someAsyncFn()强制求值（仅限当前暂停帧）
Watches 和 Console 面板怎么用才不踩坑？
Watches 不是“加了就一直有效”，Console 也不等于浏览器 DevTools 的控制台：
-
Watches默认折叠在Variables面板里；如果表达式多、刷新慢，建议右键面板标题 →Open in Separate Tab，避免拖慢主界面 - 前端调试时，
Console面板显示的是页面内所有console.*输出，但它不支持document.querySelector等 DOM 操作——要用 DOM 交互，请切到Debug Console（Node.js）或浏览器 DevTools - Node.js 调试时，
Console和Process Console是两回事：Console显示console.*，Process Console显示process.stdout原始输出；若脚本用了console.log但没刷出来，先确认是不是被重定向到了Process Console
最常被忽略的一点：面板是否出现，取决于你此刻调试的是什么——HTML 页面、Node.js 进程、还是 Service Worker，它们各自有独立的调试上下文，面板能力完全不同。别试图用一套配置打天下。
