Chrome Dev Tools Protocol

Automating browser tasks

Published in

The Startup

3 min readSep 8, 2020

A communication protocol is a system of rules that allow two or more entities of a communications system to transmit information via any kind of variation of a physical quantity. The protocol defines the rules, syntax, semantics and synchronization of communication and possible error recovery methods.

What is it ?

The Chrome Dev Tools(CDP) enables us to communicate with the Chromium & Chrome browsers and helps perform

Test Automation
Tracing & Troubleshooting
Profiling & Instrumentation

Many libraries and browser extensions leverage the protocol to orchestrate various actions within the browser. For e.g Puppeteer provides a higher level API on top of the CDP.

Getting Started

In your node project or globally let’s install chrome-remote-interface one of the many third party clients that are available.

npm i chrome-remote-interface

This library helps us to interact with the chrome or one of the supported browsers running with a known debugging port. Default is localhost:9222

To start chrome with debugging port on a Mac with a remote user profile,

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=remote-profile

Once you do this you should see, a new chrome instance opened and in the shell you see the following

Chrome opened with remote debugging port

Let’s do some Tracing

Let’s assume that you want to dump all the requests that are made when you navigate to a URL.

When you execute this code on the launched chrome you should see the page being loaded

and on the console you should see all the request urls being printed

Now to understand what is happening here

First we are establishing a connection to the chrome using the debugging port
The protocol defines a number of domains like Network, Page, Debugger etc. and each of them exposes a set of methods that can be used to track the activities pertaining to that domain.
We enable each of these domains and ensure that the activities can be tracked.
Register a callback to the event that we are interested in

Network.requestWillBeSent((params) => {      console.log(params.request.url);});

Then we navigate to the url that we want to do the tracing.

To make it a little bit more interesting let’s assume you want to build a utility which will count all the images that are loaded as part of your website’s homepage. Maybe you want to restrict the number of images that are rendered as part of your homepage and you want to keep track of it during the CI process. If the number of images goes beyond a number you want to notify the developers.

Now when you run this code, you would see the following result in the console.

Here we get number of response grouped by their type and then counting them. You can integrate this script into your integration testing pipeline to ensure that the number of images is within your budget.

Tools like lighthouse and Tracerbench use CDP to collect most of their metrics like user timing, response size etc. and lets you do the following,

Perform Audit
Performance Benchmarks
Best Practices and Reports

References