Chromium DevTools 源码构建流程-Windows系统

介绍

chrome的开发者工具是独立于chrome的单独的项目，通过按f12或审查元素打开的开发者工具其实是Chromium DevTools-frontend，该前端可以独立构建，实现开发者自定义的功能。

步骤

构建步骤基本按照官方文档来即可，参考 Chromium DevTools Docs，但是构建过程中需要进行gclient 等的更新，是颇为头大的问题。

构建depot_tools

将代码clone到本地，参考depot_tools_tutorial(7) Manual Page

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
若无法连上可配置git的Proxy，根据实际情况修改即可。

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

将depot_tools的目录加到系统环境变量中

执行gclient sync，如果卡住，说明需要配置系统Proxy，有2种方式。

如果是用cmd，则执行

 set http_proxy=127.0.0.1:端口号set https_proxy=127.0.0.1:端口号

执行完可通过set命令检查

如果是用powershell，则执行

$env:http_proxy="127.0.0.1:端口号"
$env:https_proxy="127.0.0.1:端口号"

执行完可通过 ls env:命令检查

此时执行gclient，等待更新完成后应该获得下图输出，第一次执行可能会等待许久，需要将gclient在Windows下运行的所有环境下载下来。

构建Chromium DevTools-frontend

回到 Chromium DevTools Docs，到工作目录，执行

mkdir devtools
cd devtools
fetch devtools-frontend

等待许久，根据网速而定，该步骤会将构建Chromium DevTools-frontend的所有环境下载下来，总的文件大小可能超过1G。

接下来是构建

cd devtools-frontend
gclient sync
gn gen out/Default
autoninja -C out/Default

期间会调用ninja,nodejs,python等构建项目，也需要一定的时间。

构建完成后，在out/Default目录下会生成一个gen目录，即为生成的文件，gen目录下的front_end目录即为生成的Chromium DevTools-frontend。

验证

此时将生成的front_end目录复制出来，在该目录下执行npx http-server .快速开启一个静态服务器，访问127.0.0.1:8000，可以看到我们构建的Chromium DevTools-frontend已经可以运行。

通过执行chrome --custom-devtools-frontend=file://front-end的绝对路径，可以将chrome的devtools替换为我们构建的devtools。

为验证效果，打开devtools_app.html，在其中<style>标签下加入，修改元素内容页面的背景色。

#elements-content{background-color: rgb(255 42 45);}

再次执行chrome --custom-devtools-frontend=file://front-end的绝对路径，按下F12验证效果，发现chrome已经使用了我们构建的devtools。

Chromium DevTools-frontend 源码构建流程-Windows系统相关推荐

Jetson Agx Xavier USB驱动裁剪+can时钟修改+内核源码编译流程（jetpack4.6.1)
自己做了一块Xavier载板,硬件裁剪了一些功能,导致官方镜像usb无法使用,我使用的是jetpack4.6.1(R32.7.1),所以进行驱动修改,重新编译内核. 一.虚拟机环境在Windows下 ...
从源码构建 MyBatis Generator（MBG）
从源码构建所有MyBatis Generator(MBG)发行版包括源代码,唯一的编译时间依赖关系在ant.jar上 - 用于成功编译包含的Ant任务.直接从源代码编译MBG - 只需将源解压缩到一 ...
DL4J中文文档/开始/从源码构建
在本地从主干构建注意:大多数用户应该使用Maven Central上的快速入门指南,而不是从源代码构建. 除非你有一个非常好的从源码构建的理由(例如开发新的特性--不包括自定义层.自定义激活函数.自 ...
用ADI官方源码构建任意Xilinx的ZYNQ平台下的ADI芯片控制程序（1）——硬件平台搭建篇
用ADI官方源码构建任意Xilinx的ZYNQ平台下的ADI芯片控制程序(1)--硬件平台搭建篇. 用ADI官方源码构建任意Xilinx的ZYNQ平台下的ADI芯片控制程序(2)--软件程序调试篇. ...
Android源码 —— 构建下载Android源码的虚拟机环境（Win7+VMware12+Ubuntu16）
Android源码 -- 构建下载Android源码的虚拟机环境(Win7+VMware12+Ubuntu16) 本文将介绍从Win7系统开始一步步构建下载Android源码的虚拟机环境: **1.使 ...
20220910最新版Redis7源码编译及windows中安装
20220910最新版Redis7源码编译及windows中安装文章目录 20220910最新版Redis7源码编译及windows中安装 1.Cygwin安装 1 Cygwin介绍 ...is i ...
Tomcat - 源码构建Tomcat 8.5.55 启动
文章目录官方地址源码搭建分析源码搭建步骤 (Maven管理) Step1. 新增maven管理文件 pom.xml Step2. 处理conf 和 webapps Step3. 导入IEDA 3 ...
Flink源码分析 - 源码构建
本篇文章首发于头条号Flink源码分析 - 源码构建,欢迎关注我的头条号和微信公众号"大数据技术和人工智能"(微信搜索bigdata_ai_tech)获取更多干货,也欢迎关注我的C ...
spring源码构建以及模块划分和依赖
目录 Spring源码构建环境环境安装Gradle 编译源码 spring中的依赖关系 spring中的版本号规则语义化版本命名通行规则 Spring版本命名规则 Spring源码构建环境环境 ...
RocketMQ学习第一步之源码构建
这里写目录标题绪论源码构建 1.clone 2. 构建 3.配置 3.1配置namesrv 3.2新建文件夹 3.3 配置broker 3.4 配置producer 3.5 配置 consumer ...

Chromium DevTools-frontend 源码构建流程-Windows系统

Chromium DevTools 源码构建流程-Windows系统

目录

介绍

步骤

构建depot_tools

构建Chromium DevTools-frontend

验证

Chromium DevTools-frontend 源码构建流程-Windows系统相关推荐

最新文章

热门文章