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

不复杂但容易忽略。