前言
作为前端开发工程师,我们长期与浏览器打交道,他尽职尽责的为我们绘制内容丰富的网页,但他背后所蕴含的工作流程到底是怎样的?我们却很少去探究。或许我们应该迈出自己的舒适区了,不再局限于面经上背的滚瓜烂熟的 “从地址栏输入url到页面展示到底发生了什么?”,而是从调试Chromium源码开始,理解浏览器的终极奥义,道阻且长、不妨尝一尝^-^。
安装Xcode
检查
ls `xcode-select -p`/Platforms/MacOSX.platform/Developer/SDKs
如果此命令输出以下类似结果,则代表Xcode完整版在本地已经安装:(注意不是命令行版版本)
App Store下载
直接去Mac应用商店下载对应的Xcode即可,如果出现了以下结果:
我们先检查自己的系统版本:
检查系统版本与之对应的Xcode版本:
可以看到Xcode 14.0、14.0.1都支持咱们的系统版本:
那么我们需要去官网选择与我们的系统对应的版本进行下载:(搜索并不精确,注意检查搜索出来的版本是否支持)
官网地址:developer.apple.com/download/al…
安装官方工具集 depot_tools
打开本地shell可以是原生shell也可以是iTerm,cd到你想要安装的目录,执行以下代码:
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
通过vi ~/.zshrc
或者vi ~/.bashrc
,取决于你使用的shell。然后将以下命令写入,从而将该目录下的可执行命令添加到系统环境变量中:(从而支持命令行直接输入fetch
等命令)
export PATH="$PATH:/path/to/depot_tools"
注意上面的/path/to
要改为你自己的安装路径,比如我把depot_tools
安装到了/Users/hope
目录下:
:wq
保存,并执行source ~/.zshrc
重新加载zsh配置文件使其生效。
clone 代码
注意事项:
!!! 仓库很大,需要有稳定的梯子。
!!! 如果你对 Git 不感兴趣,也可以在 clone 完毕后删掉 .git 目录,
!!! 否则如果你的 shell 会自动展示 Git 信息,那每条命令运行都会很慢。
通过shellcd
到一个指定的地方,比如我决定把Chromium代码放到桌面上:
cd ~/Desktop && mkdir chromium && cd chromium
如果你有梯子那么在执行命令之前先设置代理:
export http_proxy=http://your_proxy_server:your_proxy_port
export https_proxy=http://your_proxy_server:your_proxy_port
拉取代码:
fetch --no-history chromium
整个过程相当漫长,大概需要两三个小时,同时没有太多的日志输出,只要不报错,耐心等待即可。如果执行过程中有提示gclient sync
相关的错误,或者执行到这一步的时候网络请求超时了,重新执行一下gclient sync
指令即可
生成编译所需配置文件
假如你目前在上一步创建的目录中,执行一下命令:
cd src && gn gen out/Default
执行结果如下:
编译
这行代码后劲儿很大,敲完之后可以双手离开键盘,编译过程非常漫长,建议睡觉,睡醒了就编译完成了hhh。(大概需要5、6个小时,且吃内存,建议在晚上空闲的时候编译)
autoninja -C out/Default chrome
注:编译过程是增量的,以上编译指令可多次执行,再次执行时从已经编译的部分继续编译
编译问题记录
undeclared identifier 'NSWindowCollectionBehaviorPrimary'
解决方案:
将src/components/remote_cocoa/app_shim/native_widget_ns_window_bridge.mm
文件中的NSWindowCollectionBehaviorPrimary
替换为NSWindowCollectionBehaviorStationary
- 缺少类型声明
解决方案:将src/device/fido/BUILD.gn
文件中的mac/icloud_keychain.mm
和mac/icloud_keychain_sys.mm
删除掉,看上去是和icloud相关的可以先暂时不管
undeclared identifier 'SCStreamOutputTypeAudio'
解决方案:将src/media/audio/BUILD.gn
中的以下代码删除,音频相关的,和咱们研究的主流程关系不大
"mac/audio_loopback_input_mac.h",
"mac/audio_loopback_input_mac_impl.h",
"mac/audio_loopback_input_mac_impl.mm",
4.undeclared identifier 'AVCaptureDeviceTypeExternal'
解决方案:将src/media/audio/BUILD.gn
中的以下代码删除,视频相关的,和咱们研究的主流程关系不大
"video_capture_device_avfoundation_helpers.h",
"video_capture_device_avfoundation_helpers.mm",
undeclared identifier 'kCMVideoCodecType_AV1'
解决方案:将src/media/gpu/mac/BUILD.gn
中的以下代码删除
"video_toolbox_av1_accelerator.cc",
"video_toolbox_av1_accelerator.h",
undeclared identifier 'kCMVideoCodecType_AV1'
解决方案:将src/media/gpu/mac/BUILD.gn
中的以下代码删除
"vt_video_decode_accelerator_mac.cc",
"vt_video_decode_accelerator_mac.h",
undeclared identifier 'kCMVideoCodecType_AV1'
解决方案:将src/media/gpu/mac/BUILD.gn
中的以下代码删除
"video_toolbox_video_decoder.cc",
"video_toolbox_video_decoder.h",
运行 Chromium
out/Default/Chromium.app/Contents/MacOS/Chromium
不出意外的话你会看到以下界面:
Congratulations!!! 咱们迈出了通向浏览器终极奥义的第一步!!!