Chrome DevTools 调研
Last Edited Time
Feb 10, 2023 08:06 AM
date
Jan 3, 2023
slug
chrome-devtools
status
Published
tags
Debug
Chrome
CDP
summary
Chrome DevTools
type
Post
简介调研Cloudflare Workers 内的 Chrome DevToolsElectron 内使用 Chrome DevToolschii 内的 Chrome DevTools定制 Chrome 开发者工具安装开发工具Rreference
简介
最近在调研在线调试相关产品,目前有以下设想:
- 在 FaaS Worker 项目中集成 Chrome DevTools
- 在本地开发前端模块的过程中,真机调试集成 Chrome DevTools
调研
Cloudflare Workers 内的 Chrome DevTools
- 在进入编辑页的时候,会 inspect websocket 连接远程的调试服务
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%2Fb086609d-e7b3-4991-abeb-12d82b059bb0%2FUntitled.png%3Fid%3Df28a022e-91bc-422d-bf28-c8fabe006f2d%26table%3Dblock%26spaceId%3D6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%26expirationTimestamp%3D1720015200000%26signature%3DdLjwdug4BQ4hOpcOQJE3HBHG_j-oZmAu56pSBB1uMww?table=block&id=f28a022e-91bc-422d-bf28-c8fabe006f2d&cache=v2)
- 编辑后点击 send,会保存当前代码到远程
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%2Fb0d230fb-108a-44a5-ac08-233554d00b8e%2FUntitled.png%3Fid%3D76320a37-2ac1-4083-89e6-34e33ecfc55e%26table%3Dblock%26spaceId%3D6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%26expirationTimestamp%3D1720015200000%26signature%3DrqHaZoIhLint-ayhVIzBQK5130mLrGrxKoVFliKHnDM?table=block&id=76320a37-2ac1-4083-89e6-34e33ecfc55e&cache=v2)
- 后请求接口获取返回结果
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%2F8c368a6b-a182-434a-b3f8-1807f25a7d5b%2FUntitled.png%3Fid%3Db30198a5-bf5f-413e-9a78-0be64b8185dd%26table%3Dblock%26spaceId%3D6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%26expirationTimestamp%3D1720015200000%26signature%3DZX5CgNVeKbsbXQsBVrlKl2l-iv-FY8GXgIoVSC5UmoA?table=block&id=b30198a5-bf5f-413e-9a78-0be64b8185dd&cache=v2)
- 与此同时,远程调试服务会通过 websocket 发送 CDP 消息,在控制台打日志
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%2Fcf236ede-ff83-442d-ae67-cbdff38e4a0b%2FUntitled.png%3Fid%3Db3d65a10-512d-4578-9697-c1f6c04aa87f%26table%3Dblock%26spaceId%3D6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%26expirationTimestamp%3D1720015200000%26signature%3DgolFv-liLob70d8JchtoKsgE0vumpxE2n1w_AuzIEns?table=block&id=b3d65a10-512d-4578-9697-c1f6c04aa87f&cache=v2)
Electron 内使用 Chrome DevTools
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%2Fa2af75b9-7f21-4420-ae73-177bda8022b4%2FUntitled.png%3Fid%3D1f945462-46a7-43dd-96b9-548af4c10230%26table%3Dblock%26spaceId%3D6e1664a6-54f4-4dec-8dd1-868c4c0cf7ea%26expirationTimestamp%3D1720015200000%26signature%3DJmjE3ysT9qCnLsDW2Y9N-bb4kpvDkDBoBLsNPK3R-q0?table=block&id=1f945462-46a7-43dd-96b9-548af4c10230&cache=v2)
src/index.js
const path = require("path");
const {
app,
ipcMain,
webContents,
BrowserWindow,
BrowserView,
} = require("electron");
const createWindow = () => {
// Simulator Window
const simulatorWindow = new BrowserWindow({
useContentSize: false,
titleBarStyle: "hidden",
webPreferences: {
preload: path.join(__dirname, "preload.js"),
webSecurity: false,
webviewTag: true,
},
});
simulatorWindow.maximize();
simulatorWindow.loadFile(path.join(__dirname, "index.html"));
simulatorWindow.openDevTools({ mode: "detach" });
// Devtools View
const devtoolsView = new BrowserView();
simulatorWindow.setBrowserView(devtoolsView);
devtoolsView.setBounds({
x: 500,
y: 0,
width: simulatorWindow.getBounds().width - 500,
height: simulatorWindow.getBounds().height,
});
devtoolsView.setAutoResize({ width: true, height: true });
ipcMain.on("open-devtools", (_event, simulatorContentsId) => {
const simulator = webContents.fromId(simulatorContentsId);
simulator.setDevToolsWebContents(devtoolsView.webContents);
simulator.debugger.attach();
simulator.openDevTools();
});
};
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
src/preload.js
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
ipcRenderer: {
send: (...args) => ipcRenderer.send(...args),
},
});
src/index.html
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
#simulator {
height: 100%;
width: 500px;
}
</style>
</head>
<body>
<webview id="simulator" src="https://github.com/JiyuShao"></webview>
<script>
const { ipcRenderer } = electronAPI;
const emittedOnce = (element, eventName) =>
new Promise((resolve) => {
element.addEventListener(eventName, (event) => resolve(event), {
once: true,
});
});
const simulatorView = document.getElementById("simulator");
const simulatorReady = emittedOnce(simulatorView, "dom-ready");
simulatorReady.then(() => {
const simulatorId = simulatorView.getWebContentsId();
ipcRenderer.send("open-devtools", simulatorId);
});
</script>
</body>
</html>
chii 内的 Chrome DevTools
定制 Chrome 开发者工具
安装开发工具
官方推荐工作流见 Chrome DevTools workflow,工具安装参照 GET DEPOT TOOLS
# 下载源码
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
# 将其添加到本机环境变量中
export PATH=$PATH:/path/to/depot_tools
# 对于旧版本的 devtools-frontend,需要使用 depot_tools 的低版本,否则会报错:
# depot_tools/ninja.py: Could not find Ninja in the third_party of the current project, nor in your PATH.
cd depot_tools
git reset --hard 138bff28
# 关闭 depot_tools 的自动更新
export DEPOT_TOOLS_UPDATE=0