调用栈不可见需同时满足三条件：调试会话真实连接（右下角显示Debugger connected）、sourcemap正确加载（devtool开启且.js.map返回200）、监听对应上下文（勾选Listen for all iframes等）。
断点触发后看不到调用栈？检查调试会话是否真正连接
WebStorm 的 Frames 面板只在调试器真实接管 JS 执行时才显示有效调用栈。常见现象是点了 Debug 按钮，但右下角没有出现 Debugger connected 提示 —— 这说明只是打开了页面，没进入调试状态。
- 确认运行配置类型是
JavaScript Debug，不是Node.js或npm - URL 必须指向本地 HTML 文件（如
http://localhost:63342/index.html），不能是file://协议路径 - 确保
JavaScript Debugger插件已启用：设置 → 插件 → 搜索并勾选该插件 - 如果用的是 Vite/webpack dev server，别选
JavaScript Debug配置，改用Attach to Node.js/Chrome并手动连chrome://inspect
调用栈里只有匿名函数或 bundle.js？sourcemap 没生效
原始 JS 或 TS 文件的函数名、文件路径要出现在调用栈中，必须靠 sourcemap 正确映射。否则你看到的是压缩后的 webpack:///./src/index.js 或一堆 anonymous。
- 构建工具（如 Webpack/Vite）需开启
devtool: 'source-map'（Vite 中为build.sourcemap: true） - 浏览器 Network 面板检查
.js.map文件是否返回 200，且响应头含Content-Type: application/json - HTML 中引用的 JS 脚本标签需带
type="module"或确保未被内联合并（内联脚本不支持 sourcemap） - WebStorm 设置中不要勾选
Exclude files from library，否则 sourcemap 解析失败
异步调用栈断裂、看不到 Promise 链？启用 async stack trace
默认情况下，Chrome/V8 对 Promise.then、async/await 的调用栈是截断的，WebStorm 的 Frames 面板只能显示当前 microtask 的帧，上层 await 点不会自动展开。
- 在 Chrome DevTools → ⚙️ → Preferences → Debugger → 勾选
Enable async stack traces - WebStorm 设置 → 构建、执行、部署 → 调试器 → 勾选
Enable async stack traces - 注意：这会轻微增加调试开销；若仍不完整，可在关键
await行前加debugger强制中断
iframe 或 Service Worker 里的调用栈不显示？上下文未监听
WebStorm 默认只监听主页面上下文。iframe 加载的 JS、注册的 Service Worker、Web Worker 的执行帧不会自动出现在 Frames 面板中，即使断点命中了。
立即学习“Java免费学习笔记（深入）”；
- 打开 WebStorm 设置 → 构建、执行、部署 → 调试器 → 勾选
Listen for all iframes和Listen for service workers - 刷新页面后，在
Frames面板顶部下拉菜单中手动切换上下文（如top (index.html)→iframe-123 (frame.js)） - Service Worker 需确保其脚本也生成 sourcemap，且 URL 可被 WebStorm 内置服务器访问（不能是
https://外部地址）
Frames 面板就可能为空、错乱或只显示顶层帧。 
