打印网页渲染树

【问题标题】：Print render tree of webpage打印网页渲染树
【发布时间】：2015-10-04 02:08:02
【问题描述】：

我读到“渲染树”是由将 HTML 和 CSS 组合成一棵树的浏览器生成的。（来源：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction）。有没有办法实际打印给定网页的渲染树？

【问题讨论】：

当你说“打印渲染树”时，你是什么意思？您是否在寻找树的文本表示？你想要 DOM 元素和所有相关的样式吗？
是的。我想要 Dom 元素及其样式

标签： html css dom browser web

【解决方案1】：

我正在寻找和你一样的能力！我发现的最接近的东西是 Webkit 引擎源附带的 DumpRenderTree 工具。

DumpRenderTree 我还没有使用它，因为我无法编译 webkit。但我已经看到了它的输出示例：

Content-Type: text/plain
layer at (0,0) size 808x820
   RenderView at (0,0) size 800x600
   layer at (0,0) size 800x820
      RenderBlock {HTML} at (0,0) size 800x820
        RenderBody {BODY} at (8,8) size 784x804
         RenderHTMLCanvas {CANVAS} at (0,0) size 800x800 [bgcolor=#808080]
          RenderText {#text} at (0,0) size 0x0
    #EOF
#EOF

但这并不是我所需要的，因为它不会打印元素中的所有样式信息

希望这会有所帮助。

【讨论】：