Home > Developer > Web Develop
View the internal representation of the RenderObject tree and view the renderobject tree
Sometimes we need to know the specific details of the page layout we write. DumpRenderTree is a good tool. It is located in the WebKit/WebKitBuild/[Debug | Release]/bin directory, and an error occurs when running it directly:
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: no such file or directory.
View 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", '-' <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 *) (msgType = QtFatalMsg,
Msg = 0x42ebc0 "\ 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 = 0x7fffffd998) at Qt/src/corelib/global/qglobal. cpp: 2369
#4 0x00007ffff37c389a in qFatal (
Msg = 0x42ebc0 "\ 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 0x000000000000000000bf0 in main (argc = 2, argv = 0x7fffffffdda8) Tools/DumpRenderTree/qt/main. cpp: 147
It turns out that there is no dependent font. Just find a font: locate fonts. conf
WebKit-r174650/Tools/WebKitTestRunner/gtk/fonts. conf
WebKit/Tools/DumpRenderTree/chromium/fonts. conf
WebKit/Tools/DumpRenderTree/gtk/fonts. conf
Export WEBKIT_TESTFONTS =/opt/src/webkit/Tools/DumpRenderTree/gtk/fonts/
This operation can be run:
./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>
<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 (, 0, 0 );
}
</Style>
</Head>
<Body>
<P> This layout mechanic izm 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> Content-Type: text/plain
Layer at (800) size 600 x
RenderView at (800) size 600 x
Layer at (800) size 600 x
RenderBlock {HTML} at (800) size 600 x
RenderBody {BODY} at (8, 8) size 784x584
RenderBlock {P} at (0, 0) size 784x17
RenderText {# text} at (0, 0) size 448x17
Text run at (448) width: "This layout mechanic izm of CSS"
RenderBlock {DIV} at (320) size 349x000000 [bgcolor = # EFEFEF] [border: (10px solid #)]
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
There are some red errors. Ignore him. It's okay. The blue is the page I wrote, and the purple is the RenderObject tree we want. The visual page element printing is also arranged by tree.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
