访问渲染树答案

【问题标题】：Acessing the Render Tree访问渲染树
【发布时间】：2014-11-01 16:00:54
【问题描述】：

有什么方法可以访问页面的render tree（或 DOM 和 CSSOM 树） -- 以编程方式 -- 之前在 Chrome 中由渲染引擎处理？

而且，理想情况下，这是否可以通过 Chrome 扩展来实现（与浏览器本身交互的 Javascript 和/或 C++ 的任意组合）？

【问题讨论】：

为什么要知道渲染树？信息真的很详细。 AFAIK API 在 Chrome 中不可用，但您可以从具有渲染树转储功能的源代码编译 content_shell。
@RobW 我想获取渲染树，因为我想修改一些文档节点 - 这里没有任何阴暗或恶意，只需要出于可视化/演示目的进行。不过，我不确定content_shell 是否对我有用。我需要某种方式来访问现成的结构，而我计划开发的扩展程序/应用程序的开销很小。您是否还记得获取文档中间表示的任何其他方式（在 SSL/TLS 解密之后和蜜蜂呈现到屏幕之前的任何时间）。我敢肯定这听起来很假，但它会很方便。谢谢。
所以你实际上对渲染树感兴趣的不是文档树，而是一个文档在受脚本或扩展影响之前的文档树？
如果文档树是指 DOM，不。我需要 DOM 和 CSSOM。我（可能错误地）认为渲染树对我列出的目的有用的原因是因为我认为我会得到页面上所有内容的结构化表示。现在我想起来了，我认为文档树还不够：假设我的扩展更改了文档树。如何防止脚本和扩展覆盖扩展本身所做的更改？ PS：我对网络技术的内部非常陌生。请原谅这里的任何误解。
要获取页面未修改的 DOM，您可以使用带有x.responseType='document' 的 XMLHttpRequest 获取文档，并通过 x.response 访问 DOM。 CSSOM 由样式表和内联样式构建而成，可通过document.styleSheets 和document.querySelectorAll('[style']) 访问。手动解析会非常繁琐，如果您只对应用于 DOM 中节点的样式感兴趣，最好使用getComputedStyle。

标签： google-chrome google-chrome-extension webkit google-chrome-devtools blink

【解决方案1】：

此外，这可能不是特别相同，但您可以通过 Chrome 开发工具查看页面构建的顺序。这可以通过在时间轴中记录页面来实现，该时间轴提供了呈现页面所采取的步骤的详细列表。如果您想更深入地了解，这是一个非常广泛的列表并且很有用。希望这会有所帮助:)

【讨论】：