In this article we present how to automatically generate a network timeline such as the one in Chrome dev tools.

Capture the network traffic

The first step of our mission will be to capture the network traffic. In order to do that, we are going to use Selenium and BrowserMob Proxy, as well as PerfCascade.

Selenium will be used with Chromedriver to control Chrome and create web traffic. On the other side, we will use BrowserMob Proxy to capture the HTTP traffic and export it to a .har file.

In order to instrument these libraries we’ll use Python. However, keep in mind that you could also do this with other languages having a wrapper for Selenium and BrowserMob Proxy such as Java.

Python code

from browsermobproxy import Server
from selenium import webdriver

server = Server("/path/to/browsermob-proxy")

server.start()
proxy = server.create_proxy()
proxy.new_har()

chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument("--proxy-server={0}".format(proxy.proxy))
driver = webdriver.Chrome(
    executable_path="/path/to/chromedriver",
    chrome_options=chrome_options)
driver.get("http://antoinevastel.github.io/")

with open('./output.har', 'w') as f:
    f.write(str(proxy.har))

driver.quit()
server.stop()

Visualisation of HAR file

Once this code has been run, we obtain a file formatted according to the HTTP Archive format (har format). It is based on JSON, and enables to standardize the representation of HTTP transactions.

Several websites such as G Suite toolbox or Stiel.io enable to easily visualise har files.

In our case we are going to use the PerfCascade Javascript library. Thus, if we want we can fully automate the process of collection and visualisation of the HTTP traffic.

We just need to add this CSS file at the beginning of our page, and the 2 Javascript files at the end.

<link rel="stylesheet" href="perf-cascade-gh-page.css">
<script src="./perf-cascade.min.js"></script>
<script src="./demo-page.js"></script>

The demo-page.js file initializes the options and generates the timeline graphic. In your case you need to replace data with your har’s file content. You also need to have a div with an “output” id in your HTML file.

(function (perfCascade) {
  /** holder DOM element to render PerfCascade into */
  var outputHolder = document.getElementById("output");

  var perfCascadeOptions = {
    rowHeight: 23, //default: 23
    showAlignmentHelpers: true, //default: true
    showIndicatorIcons: true, //default: true
    leftColumnWith: 25, //default: 25
  };

  /** renders the har (passing in the har.log node) */
  function renderPerfCascadeChart(harLogData) {
    var perfCascadeSvg = perfCascade.fromHar(harLogData, perfCascadeOptions);
    outputHolder.appendChild(perfCascadeSvg);
  }
  /*
  	TODO : replace data with your har file content
  */

  renderPerfCascadeChart(data);

})(window.perfCascade);

### Result You can see the generated timeline below. It is possible to interact with the graphic and get more data by clicking on the different lines.

For further explanations about PerfCascade you can check the repository on Github.