Chrome DevTools 调研

最近在调研在线调试相关产品，目前有以下设想：

在 FaaS Worker 项目中集成 Chrome DevTools

在本地开发前端模块的过程中，真机调试集成 Chrome DevTools

Cloudflare Workers 内的 Chrome DevTools


# 下载源码
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

在进入编辑页的时候，会 inspect websocket 连接远程的调试服务

编辑后点击 send，会保存当前代码到远程

与此同时，远程调试服务会通过 websocket 发送 CDP 消息，在控制台打日志

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  ipcRenderer: {
    send: (...args) => ipcRenderer.send(...args),
  },
});

<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>

Chrome DevTools 调研

简介

调研

Cloudflare Workers 内的 Chrome DevTools

Electron 内使用 Chrome DevTools

chii 内的 Chrome DevTools

定制 Chrome 开发者工具

安装开发工具

Rreference