Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
how to issue commands and monitor the devtools protocol

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'
    }
  };
};

image

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);
}

image

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

@kdzwinel

This comment has been minimized.

Copy link

@kdzwinel kdzwinel commented Dec 8, 2016

WebInspector is no more.

WebInspector.sendOverProtocol ➡️ Main.sendOverProtocol
WebInspector.targetManager ➡️ SDK.targetManager

@paulirish

This comment has been minimized.

Copy link
Owner Author

@paulirish paulirish commented Dec 9, 2016

thx. updated.

@sliminality

This comment has been minimized.

Copy link

@sliminality sliminality commented Jan 6, 2017

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

sent messages are stringified

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.

now they are printed nicely

@paulirish

This comment has been minimized.

Copy link
Owner Author

@paulirish paulirish commented Dec 19, 2017

thx! updated. and tweaked again because things change.

@TombWater

This comment has been minimized.

Copy link

@TombWater TombWater commented Aug 20, 2018

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

@paulirish

This comment has been minimized.

Copy link
Owner Author

@paulirish paulirish commented Aug 20, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment