实践指引：如何查看页面的RenderTree

Render树是基于DOM树建立起來的一颗新的树，Render树节点和DOM树节点不是一一对应的关系，是布局和渲染等机制的基础设施。那么如何查看一个页面的RenderTree？这方面的资料和实践很少，以下是笔者从WebKit源码中摸索出的一个方法，用到了WebKit用于执行测试用例的一个脚本，背后当然还是基于内部的DumpRenderTree工具。

Checkout The Source Code

For OS X or Linux

Open a shell.

On OS X, you can use the Terminal App, which resides in /Applications/Utilities.

You can download a snapshot of the WebKit source tree from http://nightly.webkit.org/files/WebKit-SVN-source.tar.bz2. It is updated every six hours. Note the archived checkout uses an HTTP connection. We recommend running the following command to use HTTPS instead:

svn switch --relocate http://svn.webkit.org/repository/webkit/trunk https://svn.webkit.org/repository/webkit/trunk

Type these commands to check out the WebKit source tree:

tar jxvf WebKit-SVN-source.tar.bz2
cd webkit

Alternatively, type this command to check out the WebKit source tree:

svn checkout https://svn.webkit.org/repository/webkit/trunk WebKit

Run the ./Tools/Scripts/update-webkit script to update your source tree.

Build Webkit

Run the build-webkit script to build WebKit.

Use the –debug option for a debug build, which includes debugging symbols and assertions:

build-webkit --debug

By default, build-webkit places build products in WebKitBuild. You can specify a different build location on Mac in your Xcode preferences. On other platforms, the WEBKIT_OUTPUTDIR environment variable can be used to set a different build products location. If you have set up a custom build location, then build-webkit will place the build products there.

Once your build has finished, you can run Safari using your custom WebKit build.

Don’t forget that if you have any questions or problems building WebKit, feel free to get in touch!

DumpRenderTree实战

举例：~/Desktop/test.html文件源码如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DumpRenderTree in Action</title>
</head>
<body>

<div class="wrapper">
    <div class="main">
        <p>Hello, F2E.im</p>
    </div>
</div>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
</style>

</body>
</html>

依次执行如下命令：

cd webkit
svn upgrade
./Tools/Scripts/update-webkit
./Tools/Scripts/build-webkit
./Tools/Scripts/run-webkit-tests --verbose ~/Desktop/test.html

至此同级目录下会生成两个文本文件：

test-actual.txt：描述了WebKit实际构建的RenderTree结果
test-expected.txt：描述了正常情况下RenderTree的结果

针对我们举例的例子，两者的结果相同：

layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (0,0) size 800x18
  RenderBlock {HTML} at (0,0) size 800x18
    RenderBody {BODY} at (0,0) size 800x18
      RenderBlock {DIV} at (0,0) size 800x18
        RenderBlock {DIV} at (0,0) size 800x18
          RenderBlock {P} at (0,0) size 800x18
            RenderText {#text} at (0,0) size 92x18
              text run at (0,0) width 92: "Hello, F2E.im"