Browser DevTools as an Essential Tool for API Testing

The DevTools «Network» tab provides almost everything for API testing — from checking responses to making requests.

As a web application test engineer, you need to test integration of backend (APIs) with frontend (UI in a browser). During this activity the DevTools «Network» tab should be opened as a «must have» tool, because of the features described below:

Of course, the list can go on and on according to the tasks…

All examples are based on the OpenWether web page; the revealed appid token in some screenshots does not make any security sense.

Network Activity

Network Monitor (in Firefox) or Network Log (in Chrome) on the «Network» tab provides a list of all requests occurring on the page:

«Network» tab in Firefox and Chrome

Depending on the client-server interaction of your web app you may be interested in XHR requests — the most REST API requests are done through it (of course, if your web app is not completely server side rendered).

There are basic filters by types of the requests:

Firefox Network monitor toolbar filters by type (XHR)

Docs:

Request Details

All resources from the network monitor/log can be examined for all the elements of the request in the context of API testing: request/response headers and request/response body.

To my mind Firefox represents details in a nicer format: with text highlighting, filters, raw data view (in Chrome it calls «View source») and references to documentation for each header:

Firefox and Chrome headers details

The same for response’s body details — Firefox’s built-in JSON viewer highlights syntax and allows filtering. Chrome has only a basic parser on «Preview» tab:

Firefox and Chrome response details

Docs:

Advanced Filters

Contemporary web applications make tens of hundreds requests per page, so it is very important to be able to filter out excess. There are a sufficient number of different parameters available for filtering. For example:

Filter JSON data in Firefox
Filter JSON data in Firefox — mime-type:application/json

Docs:

Content Search

Unlike the query filter through requests, «Search» runs a full-text search through headers and content:

Search content in responses in Firefox
Search content in headers in Chrome
Search content in headers in Chrome

Docs:

Disable Cache

Browsers like to cache response to improve performance and efficient traffic utilization (they can be filtered by is:cached) for the next page load:

Cached resources in Chrome
Cached resources in Chrome

Use «Disable Cache» to prevent caching — all resources will be requested as at the first time:

Disable Cache checkbox in Firefox
Disable Cache checkbox in Firefox

Docs:

Preserve Log

If you have to refresh the page in order for testing or your test page makes redirects or auto refreshes, the network activity is cleared each time the page reloads. Enable «Persist Logs» (in Firefox) or «Preserve Log» (in Chrome) to save all requests across page loads (they will be saved until you disable it).

In Firefox this setting is hidden inside gear icon
In Firefox this setting is hidden inside gear icon
Preserve Log checkbox in Chrome
Preserve Log checkbox in Chrome

Docs:

Request Blocking

Blocking requests is more demanded for frontend rather than backend testing, but at least this feature is quite useful — you do not need third-party proxies to do it.

Blocking in Firefox
Blocking in Firefox

Chrome allows you to block by URL and by domain. In the «Network request blocking» panel you can edit blocking rules by patterns and wildcards (very convenient to block trackers):

Network request blocking in Chrome

All blocked requests will be highlighted and could be easily filtered in both DevTools (Firefox and Chrome).

Docs:

Edit and Resend Requests (only in Firefox)

This magnificent feature is not sufficiently covered in the documentation, but it is incredibly useful for API testing or debugging. You can take any request (even POST and other methods that modify data), edit it and resend it on behalf of the page!

«New Request» form in Firefox
«New Request» form in Firefox

Open request details on «Headers» tab → Resend → Edit and Resend → [Send] the «New Request» form:

Edit and resend request in Firefox (with proofs)

From the same context menu you can also resend requests without modification (maybe if you want to test the handler for idempotence).

Docs:

Open in New Tab

You can resend any request in a new browser’s tab for further inspection of the body (in case of API requests) or for downloading scripts, fonts, images and other content:

Open in new tab in Chrome

Firefox’s way of showing API requests in a new tab again is nicer than Chrome’s one — there are JSON viewer and info about headers:

Open in new tab in Firefox

Take a closer look at the screenshots: thanks to developers for the [Copy] buttons — it saves time.

Copy as cURL

For testing API through other tools you can copy requests in cURL format exactly the same as browser does:

Copy as cURL in Firefox
Copy as cURL in Firefox

The result of copying to the clipboard:

curl 'https://openweathermap.org/data/2.5/weather?id=2643743&appid=439d4b804bc8187953eb36d2a8c26a02' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:100.0) Gecko/20100101 Firefox/100.0' -H 'Accept: */*' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip, deflate, br' -H 'Referer: https://openweathermap.org/city/2643743' -H 'DNT: 1' -H 'Connection: keep-alive' -H 'Cookie: october_session=eyJpdiI6IlpYR1NmbEpJRUk2RDhHZkRsNVVZR2c9PSIsInZhbHVlIjoiRDBxbW9NdmdoSkdtV2FCVmwxUWZDY2hJSkpMcWIrN2xqMW14NXZmSXloTkwwVzdPMXE0UzdhRDg1VThFVWVpMFlna1FIcW9Tb1kzcnJUdHZJZlgxRjNCUHRCRXNDTHRRTjZCNzlRQUZqelVQV0gyOENkenRtVWpjc09ERW11SHEiLCJtYWMiOiI1NDYyM2RiMTM3MTZmNTgxMjJmY2QxMDRhM2Y1MjU2MTgwZWE3ZWIyOGQzMjg2MGE3ZjA3NGExMDMxNDg3OTRlIn0%3D; units=metric; stick-footer-panel=false; cityid=2643743' -H 'Sec-Fetch-Dest: empty' -H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: same-origin'

Besides cURL, Chrome has more options for copy:

Copy as cURL in Chrome
Copy as cURL in Chrome

Docs:

I hope that the reader knows why he needs a cURL and how to use it:

cURL request in Terminal
cURL request in Terminal

In the example above I added -i --output - to cURL’s request to show response headers and binary output.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrey Enin

Andrey Enin

199 Followers

Quality assurance engineer: I test complex web applications and APIs, and do automation testing.