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


(Duong) #1

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

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.


30 Days of API Testing - Day 9: Share some tools we can use to discover what API calls our applications are making
(Heather) #2

From those participating on Twitter


(Tu Anh Nguyen - KMS) #3

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:

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

(Trang Ta) #4

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
    image
  2. Performance tab record to help API performance testing

(Thanh) #5

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


(Tuan Tran) #6

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. :love_you_gesture:
  • Timing: to observe the performance of API call.


(KMS Nam Nguyen) #7

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. :love_you_gesture:

  • 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

(Thao) #8

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


(Felipe) #9

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