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

Question

有没有办法查看在页面上创建的所有文档片段？ 到目前为止，我可以通过使用JS Debugger看到它们，添加DOM对象来监视（或使用控制台），然后使用“Reveal in elements panel” 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

Answer 1

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

inspect(documentFragmentRef);

您还可以通过获取堆快照（“配置文件”面板＆gt;“获取堆快照”，“拍摄快照”）然后按DocumentFragment类名进行过滤来查找被检查应用程序的JavaScript代码中引用的所有文档片段。之后，在堆快照中选择一个片段，它将在控制台中以$ 0变量：

的形式提供