How to visualize log of chrome DevTool protocol messages?

Question

I use Selenium and Chrome driver and also enabled performance logging to provide better visibility to problems during the test. Performance log seems to be a json array that includes chrome's DevTool protocol messages. Is there any tool existent that allows me to visualize this log like in Chrome's dev tools tab.

Below is sample entry from the log:

{
"message": {
  "method": "Network.requestWillBeSent",
  "params": {
    "documentURL": "https://******/",
    "frameId": "15976.2",
    "initiator": {
      "type": "other"
    },
    "loaderId": "15976.3",
    "request": {
      "headers": {
        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
        "Upgrade-Insecure-Requests": "1",
        "User-Agent": "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36"
      },
      "initialPriority": "VeryHigh",
      "method": "GET",
      "mixedContentType": "none",
      "url": "https://********/"
    },
    "requestId": "15976.1",
    "timestamp": 80251.314924,
    "type": "Document",
    "wallTime": 1455928917.89989
  }
},
"webview": "D0C1AD9A-D631-4238-9A74-F873A7908EFB"
}

Answer 1

Since this data is just the same as what's shown in the Network tab, and that would get exported in a HAR file, there are a couple of options for obtaining that HAR:

• Browser-independent: what I do myself is use a Proxy server - Browsermob in this case - pipe all Selenium traffic through that, and then use either the REST API or Java code to export the HAR file.
• Chrome-specific: try this question and this answer.

Perhaps the easiest way to automate the visualisation of the output is to obtain the HAR in string form and paste into http://www.softwareishard.com/har/viewer/. That should give you something that looks very similar to the Network tab, but in a format that's easier to export, screenshot, and print.

My own preferred longer-term solution would be to (a) pipe/push the Chrome DTP JSON messages into Logstash for (b) export to Elasticsearch, and then (c) for Kibana to produce custom visualisations. However, the tool to allow (a) to work doesn't seem to exist yet.

Answer 2

Please take a look at the Catapult project - "the home for several performance tools that span from gathering, displaying and analyzing performance data."

https://github.com/catapult-project/catapult

You should probably also take a look at the "Trace Event Format" documentation to properly adjust the log entries to the supported format.