如何在WebStorm中查看函数的调用层级关系图？

在WebStorm中查看函数的调用层级关系，几乎是重构代码时的必备操作。但很多人的第一反应是：直接按快捷键，然后没反应？别急，问题可能出在一个非常容易被忽略的细节上——光标究竟停在哪里。

直接按 Ctrl + Alt + H（Windows/Linux）或 Cmd + Option + H（macOS），关键条件是光标必须停在函数声明名上，不是调用处，也不是括号或点号后面。这个快捷键依赖的是符号解析，不是字符串匹配，所以位置稍有偏差，就会静默失败或弹出空窗口。

为什么光标位置决定功能是否生效

WebStorm 的调用层级分析，依赖的是项目索引的符号解析，而不是简单的文本搜索。如果光标落在 myFunc() 的括号里、obj.myFunc 的点号后、或者注释/字符串中，Ctrl + Alt + H 就真的不会理你。

• 正确位置：函数定义行的 function myFunc 中任意一个字母上，或箭头函数的 myFunc 名字部分（如 const myFunc = () => {}）
• TypeScript 中，泛型函数如 foo() 需停在 foo 上，停在 上不会生效
• Vue/React 模板中写 @click="handleSubmit"，这个 handleSubmit 不会被默认识别为调用——除非你额外开启 “Search in comments and strings”，但那会混入大量噪声

Call Hierarchy 窗口里两个方向按钮的实际含义

窗口顶部有两个按钮：“Show Caller Hierarchy”（向上查：谁调了我）和 “Show Callee Hierarchy”（向下查：我调了谁）。默认打开的是 Caller，很多人误以为只能往上查，其实点另一个就能展开被调用链。

• “Unknown” 节点表示调用方不在当前索引范围内，常见于 node_modules 中的函数——检查 Settings > Languages & Frameworks > Ja vaScript > Libraries 是否勾选了 “Include libraries source”
• 异步回调里的调用（如 setTimeout(() => fn(), 0)）可能不显示，因为静态分析无法确认闭包捕获关系；这时右键节点选 “Jump to Source” 会失败
• 展开某层后若看到多个同名函数（比如重载或不同模块导出），注意看路径颜色：绿色通常代表 test 目录，灰色可能是库代码

与 Find Usages 和调试栈的本质区别

Ctrl + Alt + H 是基于项目索引的调用建模，不是运行时快照，也不是全文搜索。

• Alt + F7（Find Usages）返回所有字面出现位置，包括字符串、注释、未执行分支里的调用，结果多但杂
• Ctrl + Alt + H 过滤掉不可达路径（比如 if (false) { foo() } 不会出现），但也会漏掉 eval("foo()") 或 Function("return foo()") 这类动态调用
• 真实调用栈只在断点暂停后，通过 Debug 工具窗口的 “Frames” 标签页可见——它反映此刻线程实际执行路径，和前两者互补，不能互相替代

真正容易被忽略的是：调用层级图不会自动更新。改了代码、加了新调用、删了旧引用，必须手动重新触发 Ctrl + Alt + H，它不会像 Structure 面板那样实时响应。索引滞后时，先试 File > Reload project from Disk，再试 Invalidate Caches and Restart… > Just Restart。