Chrome-DevTools原理与定制

// 请求
{
    "id": 1,
    "method": "Debugger.setBreakpointByUrl",
    "params": {
        "lineNumber": 10,
        "url": "http://localhost:5173/src/App.jsx"
    }
}

// 响应
{
    "id": 1,
    "result": {
        "breakpointId": "1:10:0:http://localhost:5173/src/App.jsx"
    }
}

// 事件
{
    "method": "Debugger.paused",
    "params": {
        "callFrames": [...],
        "reason": "breakpoint"
    }
}

# 启动 Chrome 并暴露调试端口
chrome --remote-debugging-port=9222

[
    {
        "description": "",
        "devtoolsFrontendUrl": "devtools://devtools/bundled/inspector.html?ws=...",
        "id": "ABC123",
        "title": "New Tab",
        "type": "page",
        "url": "chrome://newtab/",
        "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/ABC123"
    }
]

// 启用 Debugger
{ "method": "Debugger.enable" }

// 设置断点
{ "method": "Debugger.setBreakpointByUrl", "params": { "lineNumber": 10, "url": "..." } }

// 单步执行
{ "method": "Debugger.stepOver" }
{ "method": "Debugger.stepInto" }
{ "method": "Debugger.stepOut" }
{ "method": "Debugger.resume" }

// 断点命中事件
{ "method": "Debugger.paused", "params": { "callFrames": [...], "reason": "breakpoint" } }

// 启用 Runtime
{ "method": "Runtime.enable" }

// 执行表达式
{ "method": "Runtime.evaluate", "params": { "expression": "document.title" } }

// 获取对象属性
{ "method": "Runtime.getProperties", "params": { "objectId": "..." } }

// Console 消息事件
{ "method": "Runtime.consoleAPICalled", "params": { "type": "log", "args": [...] } }

// 获取文档
{ "method": "DOM.getDocument" }

// 查询节点
{ "method": "DOM.querySelector", "params": { "nodeId": 1, "selector": ".app" } }

// 设置节点属性
{ "method": "DOM.setAttributeValue", "params": { "nodeId": 3, "name": "class", "value": "active" } }

// 启用 Network
{ "method": "Network.enable" }

// 请求即将发送事件
{ "method": "Network.requestWillBeSent", "params": { "requestId": "...", "request": {...} } }

// 响应接收事件
{ "method": "Network.responseReceived", "params": { "requestId": "...", "response": {...} } }

const { WebSocketServer } = require('ws');

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws) => {
    ws.on('message', (data) => {
        const message = JSON.parse(data);

        // 处理 CDP 请求
        if (message.method === 'DOM.getDocument') {
            ws.send(JSON.stringify({
                id: message.id,
                result: {
                    root: {
                        nodeId: 1,
                        nodeName: '#document',
                        children: [...]
                    }
                }
            }));
        }
    });
});

# 克隆 depot_tools（需要科学上网）
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

# 添加到 PATH
export PATH=/path/to/depot_tools:$PATH

mkdir devtools && cd devtools

# 下载源码（需要科学上网，耗时较长）
fetch devtools-frontend

// front_end/panels/profiler/ProfileLauncherView.ts
this.controlButton.textContent = "快照测试";
this.controlButton.style.backgroundColor = "red";

cd devtools-frontend

# 生成编译配置
gn gen out/Default --args='devtools_skip_typecheck=true'

# 编译
autoninja -C out/Default

# 直接在浏览器中打开
cd out/Default/gen/front_end
npx http-server .

# 或让 Chrome 使用自定义 Frontend
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --custom-devtools-frontend=file:///path/to/devtools-frontend/out/Default/gen/front_end

{
    "name": "Launch Chrome with Custom DevTools",
    "request": "launch",
    "type": "chrome",
    "runtimeArgs": [
        "--auto-open-devtools-for-tabs",
        "--custom-devtools-frontend=file:///path/to/devtools-frontend/out/Default/gen/front_end"
    ],
    "url": "http://localhost:5173",
    "webRoot": "${workspaceFolder}"
}

// 在 front_end/panels/ 下创建新面板
// my-panel/

// 1. 创建面板入口
export class MyPanel extends UI.Panel.Panel {
    constructor() {
        super('my-panel');
        const contentElement = this.contentElement;
        contentElement.textContent = 'My Custom Panel';
    }
}

// 2. 注册面板
UI.ActionRegistration.registerActionExtension({
    actionId: 'my-panel.show',
    category: UI.ActionRegistration.ActionCategory.DEVTOOLS,
    title: 'My Panel',
    bindings: [],
});

// 3. 在 Manager 中注册
UI.ViewManager.registerViewExtension({
    location: UI.ViewManager.ViewLocationValues.PANEL,
    id: 'my-panel',
    title: 'My Panel',
    commandPrompt: 'Show My Panel',
    order: 100,
    creator: () => new MyPanel(),
});

// 在 Console 中添加自定义命令
Runtime.CRC.registerCustomCommand({
    name: '$debug',
    description: 'Custom debug command',
    handler: (args) => {
        // 自定义逻辑
        return 'Debug info: ' + JSON.stringify(args);
    },
});