1、编译带debug 信息的webkit 库
删除qt-everywhere-opensource-src-4.7.0/src/3rdparty/webkit/WebCore/WebCore.pro 中的红色两行代码
还有JavaScriptCore/JavaScriptCore.pro
CONFIG(QTDIR_build) {
# Remove the following 2 lines if you want debug information in WebCore
#CONFIG -= separate_debug_info
#CONFIG += no_debug_info
}
2、打开NDEBUG宏，可以跟踪webkit 中dom tree 的结构，在GDB 中用call showTree(node) 可以打印出整个dom tree
如何打开NDEBUG 宏： 删除以下文件中的NDEBUG定义
webkit/WebCore/Makefile
webkit/WebKit.pri
webkit/JavaScriptCore/JavaScriptCore.pri
webkit/JavaScriptCore/Makefile
3、在代码中加入showTree(),查看 dom tree
如： 在FrameView.cpp 的paintContents() 中加入
showTree(contentRenderer);
打印结果：
*#document 0x4e1940
html 0x4e5a10
HTML 0x4c03b0
HEAD 0x4e7d50
#text 0x4f8380 "\n "
META 0x4f8aa8
#text 0x4f8b08 "\n "
TITLE 0x4e7dc0
#text 0x4f81b8 "\n \n"
SCRIPT 0x4effd0
#text 0x4cf700 "\n"
SCRIPT 0x4bb160
#text 0x521728 "\n"
SCRIPT 0x51f7b0
#text 0x521760 "\n "
STYLE 0x4f0cc0
#text 0x513ba0 "\n* {\n margin: 0;\n padding: 0;\n}\n\nbody {\n background-color: transparent;\n width: 640px;\n height: 530px;\n overflow: hidden;\n background: url(images/index.jpg) no-repeat;\n}\n\n div.menu {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 640px;\n height: 530px;\n}\n \n\n #background {\n position: absolute;\n "
#text 0x4bb6d0 "\n \n"
SCRIPT 0x4bbe30
#text 0x4e7b80 "\nvar backurl=window.location.href;\nvar data="[{' "
BODY 0x511c28
#text 0x512f48 "\n "
DIV 0x5120b8 CLASS=menu
#text 0x511428 "\n "
DIV 0x4fef68
#text 0x54f070 "\n "
DIV 0x54daa0
DIV 0x4eba58 CLASS=img0 STYLE=top: 35px; left: 405px; width: 95px; height: 190px; display: block;
IMG 0x4ebd18 STYLE=-webkit-transition-property: -webkit-transform; -webkit-transition-duration: 2s; -webkit-transition-timing-function: initial; -webkit-transition-delay: initial; -webkit-transform: rotate(0deg);
#text 0x54dd88 "\n "
#text 0x54dde0 "\n "
DIV 0x54de70 CLASS=name
#text 0x54e4b0 "\n "
#text 0x54a4e8 "\n \n"
#text 0x54a540 "\n\n"
