WebKit 源码调试指南

准备步骤

拉取 WebKit 源码 (如果整体仓库过大，shallow clone 即可）

git clone [email protected]:WebKit/WebKit.git

💡 需要注意的是，WebKit 并不是每个 commit 都一定在某个平台可以编译通过，因此最好根据 Tag 来选择一个已经发布版本的 commit 来进行编译

例如如果需要编译 iOS 的，可以参考各个版本 iOS 中的 WebKit 版本：

同时因为各个设备的情况都不同，最靠谱的办法还是先去 webkit 的 CI 机器列表 中找一下和自己的机器操作系统版本、Xcode 版本相近的机器最近构建成功的版本号。

例如我发现 这个 build 和我目前的机器配置相近，同时也是我想 build 的 iOS 15 Simulator 的构建成功记录，那我就试试在这个 commit 上构建（不过这里看不到 commit sha1，可以通过 commit msg 来找到对应的 commit）

将如下内容放置在环境变量中（记得替换 WEBKIT_PROJECT 变量 ）

export WEBKIT_PROJECT="$HOME/path-to-webkit"
export PATH="$WEBKIT_PROJECT/Tools/Scripts:$PATH" # 方便调用各种脚本
export PYTHONPATH="$WEBKIT_PROJECT/Tools/Scripts:$PYTHONPATH" # 让 lldb_webkit.py 能够正确运行
export DYLD_FRAMEWORK_PATH="$WEBKIT_PROJECT/WebKitBuild/Debug" # 让 Xcode 或者 Safari 不要用系统的 WebKit 而是我们编译出来的

然后在 ~/.lldbinit 中添加（记得替换 <path-to-webkit>），这个脚本可以帮我们在 Xcode 将一些 C++ 变量以更好的格式进行展示：

command script import <path-to-webkit>/Tools/lldb/lldb_webkit.py

同时将 lldb_webkit.py 代码的 1063 行从 A 替换为 B（应该是现在 WebKit 脚本的 Bug）：

def get_child_index(self, name):
    if name == "m_table":
        return self.tableSize()
    else:
        return int(name.lstrip('[').rstrip(']'))

def get_child_index(self, name):
        if name == "m_table" or name == "m_tableForLLDB":
            return self.tableSize()
        else:
            return int(name.lstrip('[').rstrip(']'))

然后编译代码，产物会被放置在 $WEBKIT_PROJECT/WebKitBuild 目录：

build-webkit --debug

如果需要构建 iOS 的，可以选择：

sudo Tools/Scripts/configure-xcode-for-embedded-development
build-webkit --debug --ios-simulator

这个脚本主要会构建如下的几个工程：

• libwebrtc
• TestWebKitAPI
• gtest
• WebKitTestRunner
• DumpRenderTree
• WebKit
• WebKitLegacy
• WebCore
• WebGPU
• JavaScriptCore
• WTF
• bmalloc
• ANGLE
• ImageDiff

接下来用 Xcode 打开工程

open WebKit.xcworkspace/

配置一下工程的配置 （File > Workspace Settings… > Advanced… > Custom > Relative to Workspace），让 Xcode 知道我们构建好的产物在 WebKitBuild 目录中：

在顶部的 Run Scheme 中选择 MiniBrowser：

如果有需要，可以将 Tools/MiniBrowser/Mac/SettingsController.m 中的默认地址换成 localhost 地址：

点击运行，开始调试！

调试入口点

• 创建 Document 对象：DocumentWriter::begin(const URL& urlReference, bool dispatch, Document* ownerDocument)
• 解析 HTML StyleSheets：resolveStyle
  • Document::resolveStyle(ResolveStyleType type)：解析 document 的 style，这个过程中包含了对文档中 StyleSheet 的解析
  • Element::resolveStyle(const RenderStyle* parentStyle：解析单个 Dom 所属的 Style

调试 Tips

明确当前 RenderObject 对应的 Element

可以在 lldb 中打印：

# 打印 id
p ((WebCore::HTMLElement &)this->m_node).m_elementData.m_ptr->m_idForStyleResolution
# 打印 class
p ((WebCore::HTMLElement &)this->m_node).m_elementData.m_ptr->m_classNames.m_data.m_ptr
# 打印 tag
p ((WebCore::HTMLElement &)this->m_node).m_tagName.m_impl.m_ptr->m_localName

Dump Render 树

<path-to-webkit>/WebKitBuild/Debug/DumpRenderTree <url>

就可以打印出来网页中的 Dom 所对应的 Render Object

参考

• Getting Started | WebKit
• Building WebKit | WebKit
• Running WebKit | WebKit
• Debugging WebKit | WebKit
• Script Tools | WebKit
• Debugging With LLDB or GDB – WebKit
• lldb formatters – WebKit