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

Question

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

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

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

Answer 1

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

inspect(documentFragmentRef);

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