如何在 Chrome 开发工具的 Elements 页面中查看#document-fragment？答案

【问题标题】：How to see #document-fragment in the Elements page in Chrome dev tools?如何在 Chrome 开发工具的 Elements 页面中查看#document-fragment？
【发布时间】：2015-11-15 22:29:22
【问题描述】：

有没有办法查看页面上创建的所有文档片段？到目前为止，我可以通过使用 JS 调试器、添加要观看的 DOM 对象（或使用控制台），然后使用“在元素面板中显示”来查看它们 https://developers.google.com/web/updates/2015/04/28/reveal-in-elements-panel?hl=en

但是有没有办法直接进入元素面板并查看创建的文档片段是什么？也试过这个（值得一试，对吧？）：

document.getElementById("#document-fragment")
null
document.getElementById("document-fragment")
null

【问题讨论】：

不是答案，但如果您已经有一个 documentFragment 并想在控制台中查看它，请将片段放入数组 [fragment] 中，您将看到片段的内容

标签： dom google-chrome-devtools

【解决方案1】：

没有所有文档片段的列表这样的东西。它们不是文档树的一部分，因此元素面板不会显示它们。但是，如果您可以在某个 JS 变量中找到对文档片段的引用，您可以使用控制台在元素面板中显示该片段：

inspect(documentFragmentRef);

您还可以通过获取堆快照（Profiles 面板 > 获取堆快照，获取快照）然后按 DocumentFragment 类名过滤来查找被检查应用程序的 JavaScript 代码中引用的所有文档片段。之后在堆快照中选择一个片段，它将在控制台中作为 $0 变量提供：

【讨论】：