how to issue commands and monitor the devtools protocol

devtools-protocol-send-command-and-monitor.md

Playing with the protocol

You can send arbitrary commands over the protocol fairly easily.

Main.sendOverProtocol('Emulation.setDeviceMetricsOverride', nexus5XMetrics());
Main.sendOverProtocol("Emulation.clearDeviceMetricsOverride");

// It returns a promise
Main.sendOverProtocol("Page.captureScreenshot").then(data => {
  // ...
});


function nexus5XMetrics() {
  return {
    mobile: true,
    screenWidth: 412,
    screenHeight: 732,
    width: 412,
    height: 732,
    positionX: 0,
    positionY: 0,
    scale: 1,
    deviceScaleFactor: 2.625,
    fitWindow: false,
    screenOrientation: {
      angle: 0,
      type: 'portraitPrimary'
    }
  };
};

Logging protocol activity

Try out the Protocol monitor panel. It's a hidden devtools experiment.

https://umaar.com/dev-tips/166-protocol-monitor/

Monkeypatch Alternative

This snippet will log all the protocol traffic to the console.

// This will log all protocol traffic to the console
const mainConnection = SDK.targetManager.mainTarget()._connection;

const _onMsg = mainConnection._onMessage;
const _sendMessage = mainConnection.__proto__.sendMessage;

mainConnection._onMessage = function(message) {
    console.log('received: ', typeof message === "string" ? JSON.parse(message) : message);
    _onMsg.apply(this, arguments);
}

mainConnection.__proto__.sendMessage = function(message) {
    console.log('sending : ', typeof message === "string" ? JSON.parse(message) : message);
    _sendMessage.apply(this, arguments);
}

dumpInspectorProtocolMessages Alternative

Instead of using the logging snippet, you can set Protocol.InspectorBackend.Options.dumpInspectorProtocolMessages = true. It does basically the same thing, but the objects are stringified, making it slightly messier to read.

thx. updated.

In its current form, the snippet for logging protocol activity also stringifies "sent" messages:

Adding a JSON.parse to the following line:

mainConnection.__proto__.sendMessage = function(message) {
    // OLD: console.log('sending : ', message);
    console.log('sending : ', JSON.parse(message));
    _sendMessage.apply(this, arguments);
}

results in nicely printed messages.

thx! updated. and tweaked again because things change.

It looks like the alternative should now be:
Protocol.InspectorBackend.Options.dumpInspectorProtocolMessages = true

@tombh2o thanks! the Protocol Monitor is now the best way to do this kinda inspection:
https://umaar.com/dev-tips/166-protocol-monitor/