how to debug webkit

最新推荐文章于 2025-08-05 10:23:03 发布

转载最新推荐文章于 2025-08-05 10:23:03 发布 · 975 阅读

webkit 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何通过修改配置去除WebKit库的无调试信息编译，并开启NDEBUG宏来查看DOM树结构，利用GDB进行WebKit中DOM树的跟踪及在代码中直接调用showTree()函数显示DOM树。

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"