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