30 Days of API Testing - Day 29: Browser developer tools have lots of API testing features, explore them and share your findings

[oceannguyen (Duong)]

Today I spent time to explore Firefox Developer Tools - Network tab. Below is some of my findings:

• I can easily filter all requests from certain domain using Filter URLs bar.

• Header sub-tab show all header information of request and response
  

  

• Cookie sub-tab show all cookies of request. If I know this tool sooner, maybe I could discover this Post call myself and didn’t disturb @friendlytester in the exercise 3
  

  

• Params sub-tab show all input data that we send along with the request
  

  

• Response sub-tab show all output data that system return
  

  

Based on information from these sub-tabs we can discover what API calls our applications are making

Timing, Stack Trace, Security sub-tabs might not related to API testing so I don’t mention here.

[heather_reid]

From those participating on Twitter

Dave Westerveld (offbeattesting)

Conor Fitzgerald (conorfi)

[kmstuanhnguyen (Tu Anh Nguyen - KMS)]

I have been testing on 5 main browsers which include Chrome, Firefox, IE, Safari and Microsoft Edge. I found that each browser has its own document about developer tools:

• chrome-devtools
• mozilla
• ie-developer
• safari-developer
• microsoft-edge

And I often use browser developer tools to:

• Find Elements by XPath or CSS using Elements tool
• Use the Network panel to monitor, inspect and profile the requests and responses sent over the wire
• Run and debug JavaScript in the Console tool

[kms_trangta (Trang Ta)]

On Chrome, press F12, Network tab and Performance tab have lot of API testing features:

1. Network tab provide header information, request data, response data, cookies, timing
   
2. Performance tab record to help API performance testing
   
   

[kms_thanhhuynh (Thanh)]

I usually use Chrome DevTools, it has a lot of helpful features, below is some findings:

• The Preserve log checkbox: check this to save requests across page loads
• Capture screenshots: Capture screenshots during page load to analyze what users see as they wait for the page to load
• Filter requests with many criteria
• View a log of requests: there are lots of info here, I often refer Status Code, Time and click on a request to view detail info such as Header, Preview Response. Besides, it is able to custom columns to add more columns, I added Method column and have just tried some more

It has many features. Read more here
Other tab’s features of DevTools are listed here

[tuanatran (Tuan Tran)]

I usually use the Chrome DevTools -> Network tab for API testing. And the list below the feature I used:

• Preserve log: to keep the requests without removing when the page reload
• Filter: to filter the request I want to test. This filter is support RegEx.
• Timing: to observe the performance of API call.

[kms_namnguyen]

I usually use the Chrome DevTools -> Network tab for API testing. And the list below the feature I used:

• Preserve log: to keep the requests without removing when the page reload

• Filter: to filter the request I want to test. This filter is support RegEx.

• Timing: to observe the performance of API call.

• Cookies: to observe the request cookies/cookies information from this site.

• Header: to observe another info related to

  • authority:
  • method:
  • path:
  • scheme:
  • accept:
  • accept-enc
  • accept-language:
  • cookie:
    See here my example

[kms_thaotnguyen (Thao)]

I used Chrome devtools > Network tab to verify the request and response

Ex: I checked on the Preverse log to keep all requests, then I filter to find the request which I want to test, select on it then you will see all the information

[felipeoliveira (Felipe)]

Firefox DevTools has a feature I really like. By right-clicking a request in its Network tab you can choose “Edit and Resend”.

This lets you edit the endpoint, headers, and body of the request and resend it. This comes really handy when exploring API requests right from the browser

[restertest (Ioan Solderea)]

I am also a Chrome Dev tools fan.

The features that I use most from the Network tab are:

1. Preview - to see how the Response data in a nice format
   
   
2. Copy Request and then play with it in Postman for example
   
   
3. Checking Request Performance
   
   

[m.zn (Maksim Zinovev)]

Here is what I know and regularly use when it comes to browser developer tools

• Option + Shift + I (Mac), Ctr + Shift + I (Win) - to open developer tools.
• I prefer to see browser developer tools docked at the bottom of the page (customizable)
• Cmd + Shift + M (or click on the icon with mobile device) - toggle device toolbar. I often use this feature when I want to see how a page will look on mobile devices.
• Elements / Sources tab - shows DOM tree of elements. You can also access it by right-clicking on the web page > Inspect. This tool can be helpful when you need selector / XPath of the element.
• Console tab - (1) shows logged messages and errors. Oftentimes, error messages can tell you that there is something not working although, you do not see any issues on the frontend. Also, I often attach screenshots with error messages to my bug reports. This can immediately tell what the problem is related to; (2) allows running JavaScript. Running JavaScript from console can be a useful testing tool. I shared my example in Day 24
• Network tab - shows network activity.
  • I use it to view the response codes, methods, paths, timing.
  • If you click on the request in “Name” column you can see request url, method, status code, response and request headers.
  • Payload, response are very helpful for API testing, because you can view what data is sent and received, copy/paste it in another tools like Postman.
  • You can filter your requests using the filter.
  • Throttling dropdown can be used to simulate slow network and see how application behaves in this case.

New things I learned:

• you can auto-open DevTools on every new tab
• Sources tab - I do not use it often but I know it can be used to create JS snippets, view files, set breakpoints to pause the code, step through the code
• Long-press on “Reload” opens menu with 3 options: normal, hard reload and empty cache with hard reload
• Clear storage and site data for a single page in Google Chrome: Developer Tools > Application > Storage > Clear site: local and session storage, indexedDB, web SQL, cookies. cache storage
• Network tab allows searching network headers and responses (click “search” icon in the top left corner)