Chrome Dev Tools Protocol
Automating browser tasks
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
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