chrome devtools的memory面板不显示调用堆栈，而是通过retainers链、闭包捕获分析和dominators视图定位内存泄漏根源：前者揭示对象持有关系，后者展现支配性内存占用。
Chrome DevTools 的 Memory 面板不直接显示“堆栈”（Call Stack），它关注的是内存堆（heap）状态，而非函数调用时序。你可能混淆了两个概念：
- Call Stack（调用堆栈） → 在 Sources 面板 或 Performance 面板 中查看，反映代码执行路径；
- Heap（堆）与对象引用关系 → 在 Memory 面板 中分析，用于定位内存泄漏、对象持有链等。
如果你真正想做的是：通过 Memory 面板定位导致内存无法释放的根源（比如某个闭包或 Detached DOM 被谁持有着），那实际要查的是 Retainers（持有者链）——它就是内存层面的“逻辑堆栈”，告诉你 谁在拽着这个对象不让 GC 回收。
下面分三类场景说明怎么用 Memory 面板“查根源”，对应你可能想问的几种情况：
一、查“谁持有某个 Detached DOM 节点”
这是最典型的需求，比如页面跳转后 DOM 节点没被释放。
- 打开 Memory 面板 → 点击 Take heap snapshot（先手动点垃圾箱图标触发 GC，再拍）
- 复现操作（如进入详情页再返回），再拍第二张快照
- 切到 Comparison 视图，筛选
detached HTMLDivElement等构造器 - 点击某条增长明显的 detached 节点 → 右侧展开 Retainers 标签页
- 从下往上读引用链：
- 最底层是
detached div - 上一级可能是
(closure) - 再往上可能是
VueComponent.setupContext.handlers或window.cache[2] - 顶层常见为
window、document或setInterval
- 最底层是
- 这条链就是“内存堆栈”——不是函数调用顺序，而是对象存活依赖路径
二、查“哪个闭包占用了大量内存”
Closure 本身小，但它捕获的大数组、DOM 或配置对象才是问题。
- 在快照的 Summary 视图 中，按 Retained Size 降序排列
- 找到
Closure类型中 Retained Size 排前几的对象 - 点击它 → 右侧看 Object Properties → 展开
[[Scopes]]→ 查看captured字段 - 如果看到
el: HTMLDivElement或data: [...]（大数组），就确认它在隐式保留资源 - 右键该 closure → Reveal in Sources，直接跳转到源码行号，检查是否漏掉
removeEventListener、clearTimeout或响应式清理
三、查“谁真正卡住了最多内存”（支配者视图）
这不是引用链，而是更宏观的支配关系：释放它，下游一大片就全可回收。
- 拍完快照后，左上角下拉菜单选 Dominators
- 默认按 Retained Size 排序，忽略前几行
window、document（它们本就该长期存在） - 关注靠前的
(closure)、Array、VueComponent、Detached HTMLDivElement - 点击某项 → 底部 Retaining Tree 会展示它直接/间接支配的所有对象
- 这相当于“内存拓扑图”，帮你一眼锁定最大内存黑洞
⚠️ 注意：Memory 面板里没有传统意义上的 Call Stack。真要看函数调用过程，请去
- Sources 面板 + 断点暂停后看底部 Call Stack 标签页
- 或 Performance 面板录制后，在 Main Thread 轨迹里点任务 → 查看 Bottom-Up / Call Tree
不复杂但容易忽略。
