Martkos IT Ltd

View Original

Chrome Dev Mode

Google Chrome (and Chromium) offer a developer mode in the browser. This allows you to see inside the web content and understand it’s behaviour. This can be very useful when creating test assets as you will be able to see the requests that are made to the server and the response.

To initiate developer mode open Google Chrome and press CTRL + SHIFT + I. A window will open inside the browser tab on the right hand side.

When we next navigate to another page the details showing the server request and response will be captured in the right hand side window.

Click on “Our Work” on the top bar navigation

A large number of items are returned on this request and will be listed in the right panel.

To filter out some of the returned information you can click in the filter text box and paste the following text.

-pxi -.js -.ttf -gif -.woff -css -settings -l? -Record -button

The window should now show a smaller subset of the requests.

Click on the name “our-work” in the panel we will see detail about that request. Chrome breaks the request into several sections.

General - contains information about the request url, request method and status code.

Response Headers - contains information returned in the response headers.

Request Headers - contains information returned in the request headers.

So when we click on the Our Work link we are actually executing a HTTP Get request to https://martkos-it.co.uk/our-work with a variety of headers and we then get the page and response headers in this view.

To see the response body returned click on the Response tab. In this case you get the HTML content. The content returned will vary dependant on the request. For instance, it could be XML or JSON.

Even from the example above we now have enough information to be able to create test assets.

Request URL: https://martkos-it.co.uk/our-work

Request Method: GET

Referer: https://martkos-it.co.uk/

We could use CURL to make a request like this:-

curl https://martkos-it.co.uk/our-work

If we wished to provide header information along with the request we could add to the curl command:-

curl -i -H “referer: https://martkos-it.co.uk/” https://martkos-it.co.uk/our-work

FURTHER READING

Chrome Developer Tools

Curl Commands