how to debug webkit

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"