Skip to content

Instantly share code, notes, and snippets.

@paulirish
Forked from jasonLaster/inspector.js
Last active February 11, 2020 17:42
Show Gist options
  • Save paulirish/127aebeb18788e3babc2b194c2f7ad0a to your computer and use it in GitHub Desktop.
Save paulirish/127aebeb18788e3babc2b194c2f7ad0a to your computer and use it in GitHub Desktop.
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

@paulirish
Copy link
Author

thx. updated.

@sliminality
Copy link

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
Copy link
Author

thx! updated. and tweaked again because things change.

@TombWater
Copy link

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

@paulirish
Copy link
Author

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