Chrome DevTools 远程调试协议分析及实战

# https://chromedevtools.github.io/devtools-protocol/1-3/Log
Log Domain 

Provides access to log entries.

Methods

Log.clear
Log.disable
Log.enable
Log.startViolationsReport
Log.stopViolationsReport

Events

Log.entryAdded

Types

LogEntry
ViolationSetting

# tree -L 1
.
├── accessibility
├── accessibility_test_runner
│   ├── AccessibilityPaneTestRunner.js
│   └── module.json
├── animation
├── application_test_runner
├── axe_core_test_runner
...
├── input
├── inspector.html
├── inspector.js
├── inspector.json
├── network
├── network_test_runner
├── node_app.html
├── node_app.js
├── node_app.json
├── worker_app.html
├── worker_app.js
└── worker_app.json

// devtools_frontend/front_end/devtools_app.json
{
  "modules" : [
    { "name": "emulation", "type": "autostart" },
    { "name": "inspector_main", "type": "autostart" },
    { "name": "mobile_throttling", "type": "autostart" },
    ...
    { "name": "timeline" },
    { "name": "timeline_model" },
    { "name": "web_audio" },
    { "name": "media" }
  ],
  "extends": "shell",
  "has_html": true
}

{
    "extensions": [
        {
            "type": "view",
            "location": "drawer-view"
        }
    ],
    "dependencies": [
        "elements"
    ],
    "scripts": [],
    "modules": [
        "animation.js",
        "animation-legacy.js",
        "AnimationUI.js"
    ],
    "resources": [
        "animationScreenshotPopover.css",
        "animationTimeline.css"
    ]
}

// devtools-frontend/front_end/RuntimeInstantiator.js
export async function startApplication(appName) {
  console.timeStamp('Root.Runtime.startApplication');
  const allDescriptorsByName = {};
  for (let i = 0; i < Root.allDescriptors.length; ++i) {
    const d = Root.allDescriptors[i];
    allDescriptorsByName[d['name']] = d;
  }
  if (!Root.applicationDescriptor) {
    // 加载应用配置 <appName>.json
    let data = await RootModule.Runtime.loadResourcePromise(appName + '.json');
    Root.applicationDescriptor = JSON.parse(data);
    let descriptor = Root.applicationDescriptor;
    while (descriptor.extends) {
      // 加载父级配置直到没有父级
      data = await RootModule.Runtime.loadResourcePromise(descriptor.extends + '.json');
      descriptor = JSON.parse(data);
      Root.applicationDescriptor.modules = descriptor.modules.concat(Root.applicationDescriptor.modules);
    }
  }
  const configuration = Root.applicationDescriptor.modules;
  const moduleJSONPromises = [];
  const coreModuleNames = [];
  for (let i = 0; i < configuration.length; ++i) {
    const descriptor = configuration[i];
    const name = descriptor['name'];
    const moduleJSON = allDescriptorsByName[name];
    // 根据每个模块的 module.json 加载模块
    if (moduleJSON) { 
      moduleJSONPromises.push(Promise.resolve(moduleJSON));
    } else {
      moduleJSONPromises.push(
          RootModule.Runtime.loadResourcePromise(name + '/module.json').then(JSON.parse.bind(JSON)));
    }
  }
    // ...
}

// devtools-frontend/front_end/root/Runtime.js
function evaluateScript(sourceURL, scriptSource) {
    loadedScripts[sourceURL] = true;
    if (!scriptSource) {
      // Do not reject, as this is normal in the hosted mode.
      console.error('Empty response arrived for script \'' + sourceURL + '\'');
      return;
    }
    self.eval(scriptSource + '\n//# sourceURL=' + sourceURL);
}

// devtools-frontend/front_end/main/MainImpl.js
new MainImpl(); // 初始化SDK(协议)，初始化socket连接，初始化通信

[{
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/8ED9DABCE2A6BD36952657AEBAA0DE02",
   "faviconUrl": "https://github.githubassets.com/favicon.ico",
   "id": "8ED9DABCE2A6BD36952657AEBAA0DE02",
   "title": "GitHub - Unitech/pm2: Node.js Production Process Manager with a built-in Load Balancer.",
   "type": "page",
   "url": "https://github.com/Unitech/pm2",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/8ED9DABCE2A6BD36952657AEBAA0DE02"
}]

{
   "Browser": "Chrome/80.0.3987.149",
   "Protocol-Version": "1.3",
   "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36",
   "V8-Version": "8.0.426.27",
   "WebKit-Version": "537.36 (@5f4eb224680e5d7dca88504586e9fd951840cac6)",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/ad007235-aa36-4465-beb1-70864067ea49"
}

// devtools-frontend/front_end/sdk/Connections.js
export function _createMainConnection(websocketConnectionLost) {
  const wsParam = Root.Runtime.queryParam('ws');
  const wssParam = Root.Runtime.queryParam('wss');
  if (wsParam || wssParam) {
    const ws = wsParam ? `ws://${wsParam}` : `wss://${wssParam}`;
    return new WebSocketConnection(ws, websocketConnectionLost); 
  }
  if (Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
    return new StubConnection();
  }
  return new MainConnection();
}

serve -p 8002

// server.js
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer(function(request, response) {
    response.writeHead(404);
    response.end();
});
server.listen(3232, function() {
    console.log((new Date()) + ' Server is listening on port 3232');
});
wsServer = new WebSocketServer({
    httpServer: server
});
var frontendConnection;
var debugConnection;

wsServer.on('request', async function(request) {
    var requestedProtocols = request.requestedProtocols;
    if(requestedProtocols.indexOf("frontend") != -1){  // 处理来自调试器前端的请求
        frontendConnection = request.accept('frontend', request.origin);
        frontendConnection.on('message', function(message) {
            if (message.type === 'utf8') {
                // 把调试器前端的请求直接转发给被调试页面
                if(debugConnection){
                    debugConnection.sendUTF(message.utf8Data)
                }else{
                    frontendConnection.sendUTF(JSON.stringify({msg:'调试器后端未准备好，先打开被调试的页面'}))
                }  
            }
        })
        frontendConnection.on('close', function(reasonCode, description) {
            console.log('frontendConnection disconnected.');
        });
    }
    if(requestedProtocols.indexOf("remote-debug") != -1){ // 处理来自被调试页面的请求
        debugConnection = request.accept('remote-debug', request.origin);
        debugConnection.on('message', function(message) {
            if (message.type === 'utf8') {
                var feed = JSON.parse(message.utf8Data);
                if(feed.type == "remote_debug_page"){   // 确认连接
                    debugConnection.sendUTF(JSON.stringify({"type":"start_debug"}));
                }else if(feed.type == "start_debug_ready"){
                    // 被调试页面已连接好
                } else{
                    // 把被调试页面的数据全部转发给调试器前端
                    if(frontendConnection){
                        frontendConnection.sendUTF(message.utf8Data)
                    }else{
                        console.log('无法转发给frontend,没有建立连接')
                    }
                }                
            }
        });
        debugConnection.on('close', function(reasonCode, description) {
            console.log((new Date()) + ' Peer remote' + debugConnection.remoteAddress + ' disconnected.');
        });
    }
});

var host = "localhost:3232"
var ws = new WebSocket(`ws://${host}`,'remote-debug');       
var search = location.search.slice(1);
var urlParams = {};
search.split('&').forEach(s=>{
    var pair = s.split('=');
    if(pair.length == 2){
        urlParams[pair[0]] = pair[1]
    }
})
ws.onopen = function() {
    ws.send(JSON.stringify({type:"remote_debug_page",url:location.href}))
};
ws.onmessage = function (evt)  { 
    var feed = JSON.parse(received_msg);
    if(feed.type == "start_debug") {
        // 连接到 webSocketDebuggerUrl
        var debugWS = new WebSocket(`ws://${urlParams.ws}`);  
        debugWS.onopen = function() {  
            ws.send(JSON.stringify({type:"start_debug_ready"})); // 确认可以开始调试
            ws.onmessage = function (evt) { // 转发到 debugger
                debugWS.send(evt.data);
            }
            ws.onclose = function (evt) {
                debugWS.close()
            }
        }
        debugWS.onmessage = function (evt)  { 
            ws.send(evt.data); // 转发到 server
        }
        debugWS.onclose = function() { 
            ws.send(JSON.stringify({type:"remote_page_lost",url:location.href}))
        };
    }
};
ws.onclose = function() { 
    console.log("连接已关闭..."); 
};

if (message.type === 'utf8') {
    var feed = JSON.parse(message.utf8Data);
    if(feed.type == "remote_debug_page"){  
        debugConnection.sendUTF(JSON.stringify({"type":"start_debug"}));
    }else if(feed.type == "start_debug_ready"){
        writeStream = fs.createWriteStream(saveFilePath,{flags:'as',encoding: 'utf8'});
    } else{
        // 全部转发给 frontendConnection
        if(frontendConnection){
            frontendConnection.sendUTF(message.utf8Data)
        }else{
            console.log('无法转发给frontend,没有建立连接')
        }
        // 保存数据到文件
        if(feed.method)writeStream.write(message.utf8Data+'\n') 
    }                
}

if(requestedProtocols.indexOf("feedback") != -1){
    feedbackConnection = request.accept('feedback', request.origin);
    feedbackConnection.on('message', function(message) {
        // 忽略来的消息
    })
    const fileStream = fs.createReadStream(saveFilePath);
    const rl = readline.createInterface({
        input: fileStream,
        crlfDelay: Infinity
    });
    for await (const line of rl) {  // 逐行读取数据
        feedbackConnection.sendUTF(line)
        rl.pause();
        setTimeout(_=>{rl.resume()},1000)
    }
    feedbackConnection.on('close', function(reasonCode, description) {
        console.log('feedbackConnection disconnected.');
    });
}