Chromium编译全流程的实验手册

之前为了给学前端的女友准备一份 了解前端之根本浏览器原理的教程, 仔细摸索了编译的整个流程.
做出了一个实验手册,最终以修改一个 默认浏览器的CSS样式为目的.
这次分享出来.
谢谢那些帮助过自己的友人.

实验向导手册

author:dalerkd

实验目的

编译一款基于Chromium(谷歌开源浏览器)的浏览器.
版本: Chromium 70
对系统的要求:
https://chromium.googlesource.com/chromium/src/+/master/docs/windows_build_instructions.md

步骤

0安装VS2017相关

0. 如果提示以下内容缺少.net framework 4.6,如果系统是未激活先用KMS激活。
   下载.netframework4.6并安装.如果无法验证证书,需要打开Update.更新所有重要的补丁.
1. 安装VS2017,勾选
   “使用C ++进行桌面开发”组件和“MFC和ATL支持
   ”子组件。
2. 安装10.0.17134 Windows 10 SDK
   默认情况下只需要单独在组件中勾选ATL即可。
3. 安装SDK Debugging Tools包,方法:
   还必须安装SDK调试工具。 如果通过Visual Studio安装程序安装了Windows 10 SDK，则可以通过以下方式安装它们：控制面板→程序→程序和功能→选择 “Windows Software Development Kit” →Change→Change→选择“Debugging Tools For Windows” “→Change。 或者，您可以下载独立SDK安装程序并使用它来安装调试工具。
   The SDK Debugging Tools must also be installed. If the Windows 10 SDK was installed via the Visual Studio installer, then they can be installed by going to: Control Panel → Programs → Programs and Features → Select the “Windows Software Development Kit” → Change → Change → Check “Debugging Tools For Windows” → Change. Or, you can download the standalone SDK installer and use it to install the Debugging Tools.

1配置代理和下载depot_tools

1. 安装代理工具
   并测试是否能够访问Google.
2. 安装git
   去官网下载git
3. 为git设置代理
   在命令行中执行:

git config --global http.proxy 'socks5://127.0.0.1:1080'

git config --global https.proxy 'socks5://127.0.0.1:1080'

3. 下载depot_tools(用来管理配置工具的软件)
   命令行中运行以下命令,获取depot_tools

git clone https://chromium.googlesource.com/chromium/tools/depot_tools

在环境变量PATH下添加depot_tools的路径

• 给工具包设置代理
  启动一个管理员权限的cmd窗口:
  输入

>netsh
netsh>winhttp
netsh winhttp>set proxy 127.0.0.1:1080 "<local>"
netsh winhttp>exit
>set http_proxy=127.0.0.1:1080
>set https_proxy=127.0.0.1:1080

• 自动设置环境完成安装
  在命令行输入:

gclient//每次运行该命令都需要以上设置...

2配置环境变量

DEPOT_TOOLS_WIN_TOOLCHAIN = 0

GYP_MSVS_VERSION = 2017

GYP_MSVS_OVERRIDE_PATH = D:\Program Files (x86)\Microsoft Visual Studio\2017\Community
//当然你需要确认你的VS是在哪个目录下

3下载浏览器最新代码-进入漫长下载过程

注意：检查你的计算机休眠时间:使计算机进入休眠:从不.

命令行输入:

$ git config --global user.name "你的名字"
$ git config --global user.email "你的邮箱@chromium.org"
$ git config --global core.autocrlf false
$ git config --global core.filemode false
$ git config --global branch.autosetuprebase always
//来源： https://chromium.googlesource.com/chromium/src/+/master/docs/windows_build_instructions.md#Get-the-code

# 建立目录
mkdir chromium

# 切换到源码目录
cd ./chromium

# fetch源码
fetch chromium

4配置编译目录

生成.ninja文件及工程文件
找到chrome?在CMD命令行(不是Git Shell)输入命令,会自动弹出增加参数的文件:

gn args out/x86_r --ide=vs

更多参数的用法
https://chromium.googlesource.com/chromium/src/+/master/docs/windows_build_instructions.md

参考文件参数:

is_component_build = false
is_debug = true
enable_nacl = false
target_cpu = "x86"


ffmpeg_branding="Chrome"
proprietary_codecs=true
/*
如果需要对视频的支持需要修改项目,也可以不添加
*/

5编译Chromium

一样切换到out目录的上一级命令行输入:

ninja -C out/x86_r chrome

6打包成安装包

命令行输入:

ninja -C out/x86_r mini_installer

任务:定制自己的浏览器-CSS默认样式

使用网址阅读

chrome浏览器的默认CSS样式:
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/html.css
已经失效

新地址在这里:
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/html/resources/html.css
设计更好的默认CSS方案?

修改

编译

打包

问答

• 编译的谷歌浏览器的版本是多少?
• 如果希望找到 谷歌浏览器 的代码 去哪里找?演示一下如何找到主页的代码.
• 编译教程在哪里?
• 编译花费了多长时间?
• 如何下载谷歌源码?花费了多长时间?