How to Use Chrome Developer Tools for API Testing?

The Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. This tool has made debugging a lot easier. The built-in developer tool allows you to edit the page, debug it and also give them access to work on the internal web browser and application. This one boosts the productivity of the developers, and also it makes them easy to diagnose the website. Following are some most important features of Chrome Developer Tools.

1. Easy Access on Desktop or Mobile
2. Element Tab
3. Console
4. Network
5. Performance
6. Memory Track Down Memory Leaks
7. Application: Inspect Resources
8. Security
9. Audits or Lighthouse

To read in detail please refer to this article: 9 Features of Chrome Developer Tools That You Must Know

API is an abbreviation for Application Programming Interface which is a collection of communication protocols and subroutines used by various programs to communicate between them. There are different types of APIs are available like

• WEB APIs
• LOCAL APIs
• PROGRAM APIs
• SOAP (SIMPLE OBJECT ACCESS PROTOCOL)
• REST (Representational State Transfer)

In this article, we are going to see how can we use this tool for testing our APIs. 

Step by Step Implementation

Step 1: Open the Chrome Developer Tools

Go to your Chrome Browser > Click on the Right Corner 3 Vertical Dots > More Tools > Developer Tools as shown in the below image. 

And this is what the Developer tools look like. Adjust the screen as per your convenience. And come to the Network tab because there are many things to explore in this tool but for API testing we need the Network tab as shown in the below image. 

Step 2: Hit Your Endpoint

Now in the URL tab hit your endpoint or the URL you want to test. Suppose in this article we are putting the following URL that we have created in this article Data Binding in Spring MVC with Example.

http://localhost:8080/simple-calculator/geeksforgeeks.org/home

And whenever you put the URL and click Enter you can see something is happening in the Network tab. Refer to the below image to see what happens. 

Now click at your endpoint and you can see in the Headers part everything is present related to your API. It is highly suggested that you must explore the Preview, Response, Timing, Cookies tab also. Refer to the below image.

Step 3: Let’s Put Some Values and See What Happens

Now let’s put some values and click on the Bind Data button, and you can see in the below image we get our next endpoint that is with the query string. 

process-homepage?firstName=Amiya&lastName=Rout

And also in the Payload part, you can see our query parameter. 

Reference article: Understand Query String and Query Parameter in Spring MVC

So this is how you can play around with these Chrome Developer Tools and test your API in case of any failure or according to your requirements. There are many things you can explore in this tool and it every very helpful for testing your APIs.