查看RenderObject树的内部表示

来源：互联网发布：万达电商淘宝卖货编辑：程序博客网时间：2024/05/16 12:05

有时候我们需要知道自己写的页面排版的具体细节，DumpRenderTree是个不错工具。它位于WebKit/WebKitBuild/[Debug|Release]/bin目录下，直接运行会出错：

gdb ./DumpRenderTree

./DumpRenderTree http://192.168.1.100/BoxModeofCSS.html

[Thread debugging using libthread_db enabled]
Using host libthread_db library "/lib/x86_64-linux-gnu/libthread_db.so.1".

Program received signal SIGABRT, Aborted.
0x00007ffff2e89cc9 in __GI_raise (sig=sig@entry=6) at ../nptl/sysdeps/unix/sysv/linux/raise.c:56
56 ../nptl/sysdeps/unix/sysv/linux/raise.c: 没有那个文件或目录.

查看callstack：

(gdb) bt
#0 0x00007ffff2e89cc9 in __GI_raise (sig=sig@entry=6) at ../nptl/sysdeps/unix/sysv/linux/raise.c:56
#1 0x00007ffff2e8d0d8 in __GI_abort () at abort.c:89
#2 0x00007ffff37c3247 in qt_message_output (msgType=QtFatalMsg,
buf=0x654758 "\n\n", '-' <repeats 70 times>, "\nWEBKIT_TESTFONTS environment variable is not set correctly.\nThis variable has to point to the directory containing the fonts\nyo"...) at Qt/src/corelib/global/qglobal.cpp:2323
#3 0x00007ffff37c32f2 in qt_message(QtMsgType, const char *, typedef __va_list_tag __va_list_tag *) (msgType=QtFatalMsg,
msg=0x42ebc0 "\n\n", '-' <repeats 70 times>, "\nWEBKIT_TESTFONTS environment variable is not set correctly.\nThis variable has to point to the directory containing the fonts\nyo"..., ap=0x7fffffffd998) at Qt/src/corelib/global/qglobal.cpp:2369
#4 0x00007ffff37c389a in qFatal (
msg=0x42ebc0 "\n\n", '-' <repeats 70 times>, "\nWEBKIT_TESTFONTS environment variable is not set correctly.\nThis variable has to point to the directory containing the fonts\nyo"...) at Qt/src/corelib/global/qglobal.cpp:2552
#5 0x0000000000425432 in WebKit::initializeTestFonts () Tools/DumpRenderTree/qt/QtInitializeTestFonts.cpp:62
#6 0x0000000000426bf0 in main (argc=2, argv=0x7fffffffdda8) Tools/DumpRenderTree/qt/main.cpp:147

原来是没有依赖的字体，随便找一个字体：locate fonts.conf

WebKit-r174650/Tools/WebKitTestRunner/gtk/fonts/fonts.conf
WebKit/Tools/DumpRenderTree/chromium/fonts.conf
WebKit/Tools/DumpRenderTree/gtk/fonts/fonts.conf

export WEBKIT_TESTFONTS=/opt/src/webkit/Tools/DumpRenderTree/gtk/fonts/

这回就可以运行了：

./DumpRenderTree http://192.168.1.100/BoxModelofCSS.html
ERROR: Application Cache Storage: failed to execute statement "DELETE FROM CacheGroups" error "no such table: CacheGroups"
webkit/Source/WebCore/loader/appcache/ApplicationCacheStorage.cpp(561) : bool WebCore::ApplicationCacheStorage::executeSQLCommand(const WTF::String&)
ERROR: Application Cache Storage: failed to execute statement "DELETE FROM Caches" error "no such table: Caches"
webkit//Source/WebCore/loader/appcache/ApplicationCacheStorage.cpp(561) : bool WebCore::ApplicationCacheStorage::executeSQLCommand(const WTF::String&)
ERROR: Application Cache Storage: failed to execute statement "DELETE FROM Origins" error "no such table: Origins"
webkit//Source/WebCore/loader/appcache/ApplicationCacheStorage.cpp(561) : bool WebCore::ApplicationCacheStorage::executeSQLCommand(const WTF::String&)
Source:

<html><head>

<style type="text/css">
#adiv /*id é€‰æ‹©å™¨*/
{
width: 300px;
background-color: #efefef;
border: 10px solid black;
}
</style>
<style type="text/css">
.aclass /*class é€‰æ‹©å™¨*/
{
border: 5px solid red;
margin: 150px 100px 10px 40px;
padding: 15px 20px 25px 30px;
color: rgb(250,0,0);
}
</style>

</head>
<body>

<p>This layout mechanizm of CSS</p>
<div id="adiv">
<div class="aclass"> A B C D E F G H I J K L M N O P Q R S T</div>
</div>
</body></html>
Content-Type: text/plain
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
RenderBlock {P} at (0,0) size 784x17
RenderText {#text} at (0,0) size 448x17
text run at (0,0) width 448: "This layout mechanizm of CSS"
RenderBlock {DIV} at (0,33) size 320x349 [bgcolor=#EFEFEF] [border: (10px solid #000000)]
RenderBlock {DIV} at (50,160) size 160x169 [color=#FA0000] [border: (5px solid #FF0000)]
RenderText {#text} at (35,20) size 80x119
text run at (35,20) width 80: "A B C"
text run at (35,37) width 80: "D E F"
text run at (35,54) width 80: "G H I"
text run at (35,71) width 80: "J K L"
text run at (35,88) width 80: "M N O"
text run at (35,105) width 80: "P Q R"
text run at (35,122) width 48: "S T"
#EOF
#EOF
#EOF
LEAK: 26 WebCoreNode

红色的是有些错误，别理他，没事。蓝色的是我写的页面，紫色的就是我们要的RenderObject树，可视化的页面元素打印也是按照树型排列，好看吧。

0 0