Chrome Dev Mode
A guide to using Google Chrome's developer tools for web testing and debugging, including monitoring network traffic, filtering requests, and analyzing HTTP headers.
Mark
Performance Testing Expert
This technical guide demonstrates how to use Google Chrome’s developer tools for web testing and debugging purposes.
Opening Developer Mode
Launch Chrome’s developer interface using CTRL + SHIFT + I to access a side panel displaying server communications and page behavior data.
Monitoring Network Traffic
When navigating to new pages, the developer panel captures HTTP requests and responses. Clicking navigation links generates numerous logged items that you can inspect.
Filtering Requests
To reduce noise, you can input a filter string to display only relevant network activity:
-pxi -.js -.ttf -gif -.woff -css -settings -l? -Record -button
This filter removes common static assets and tracking requests from the view.
Analyzing Request Details
Clicking specific requests reveals three key sections:
- General: URL, HTTP method, and status code information
- Response Headers: Data sent back from the server
- Request Headers: Information sent to the server
Practical Application
Here’s an example of a GET request with accompanying headers:
GET https://martkos-it.co.uk/our-work
You can recreate such requests using CURL:
curl -i -H "referer: https://martkos-it.co.uk/" https://martkos-it.co.uk/our-work
This enables developers to create reproducible test scenarios and understand web application behavior.
Tags: