Chrome 的 DevTools 竟然是用 JS 写的

·  阅读 8644
Chrome 的 DevTools 竟然是用 JS 写的

万万没想到 Chrome 的 DevTools 竟然是用 JS 写的,感觉自己也行了(做 Chrome 工程师😂)。既然是 JS 写的代码,作为 FE 肯定对源码充满了好奇。本文将在 Mac 上搭建 Chrome DevTools 环境,看看源码并调试一下。

环境搭建

环境搭建全文参考官方文档。下面仅列出我觉得最简单的搭建步骤。

1. 安装 depot_tools

参考文档,就两个步骤:

# 1. 找个地方克隆 depot_tools 项目
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

# 2. 加入 PATH 一遍可以使用 fetch/gn/autoninja/gclient 命令
export PATH=/path/to/depot_tools:$PATH
复制代码

2. 克隆 DevTools 项目

# 1. 找个地方创建 devtools 目录
mkdir devtools

cd devtools

# 2. fetch 是 depot_tools 提供的命令,将克隆 DevTools 项目
fetch devtools-frontend
复制代码

3. 修改代码,以便验证本地代码生效

推荐使用 vscode 打开 devtools-frontend 项目,修改 front_end/panels/profiler/ProfileLauncherView.ts 文件,找到 UIStrings.takeSnapshot 所在行,并在该行下新增一行修改按钮的颜色,如下图。

image.png

// 新增代码为:
this.controlButton.style.color = 'orange';
复制代码

4. 构建

cd devtools-frontend

# 1. 生成用于构建的配置,配置 devtools_skip_typecheck 跳过 TS 检查,构建更快
gn gen out/Default --args='devtools_skip_typecheck=true'

# 2. 执行构建,慢慢等待,后面修改代码后,只需执行这一步
autoninja -C out/Default
复制代码

5. 运行

# 要求本地 Chrome 在 79 版本以上
# 用了 sudo,所以是以 root 的用户身份启动的 Chrome
sudo "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
复制代码

切换到 Memory Tab,可以看到 Take snapshot 的按钮字体颜色为橙色,我们的本地代码生效了。

image.png

调试

  1. 先将 DevTools 设置为 undock,如下图。先点击右侧三个点,然后选择最左侧的 undock。 image.png
  2. 选中刚刚 undock 的 DevTools 窗口,按快捷键 ⌘+⌥+I,会弹出另一个 DevTools 窗口。该窗口可以检查/调试 undocked 的 DevTools 窗口。 QQ20221022-235406-HD.gif
  3. 选中第二个 DevTools 窗口的 Source Tab,⌘+P 打开 ProfileLauncherView.ts 文件,并在 controlButtonClicked 方法中断点。 image.png
  4. 在第一个 DevTools 中,点击 Memory Tab 中的 Take snapshot 按钮,将触发断点。 QQ20221023-000126-HD.gif

总结

如果以后用 DevTools 遇到疑问,可以直接看代码了,真香😍。

分类:
前端
收藏成功!
已添加到「」, 点击更改