Programming

How to Use Chrome Developer Tools for API Testing

Chrome Developer Tools for API Testing

Introduction

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 give them access to work on the internal web browser and application.

 

 

Features of Chrome Developer Tools

Accessing the developer tool is very easy. You can press Ctrl+Shift+C or right-click on an element on the website and select Inspect from here. You will see a lot of panels or tabs in DevTools. These tabs give you a lot of functionalities. Some of the features of DevTools include:

  • Easy Access on Desktop or Mobile
  • Element Tab
  • Console
  • Network
  • Performance
  • Memory Track Down Memory Leaks
  • Application: Inspect Resources
  • Security
  • Audits or Lighthouse

Types of APIs

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

  • WEB APIs
  • LOCAL APIs
  • PROGRAM APIs
  • SOAP (Simple Object Access Protocol)
  • REST (Representational State Transfer)

 

 

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.

Open the Chrome Developer Tools

Step 2: Hit Your Endpoint

Now in the URL tab, hit your endpoint or the URL you want to test. For instance, if your API is on a URL such as;

 

http://localhost:8080/simple-calculator/

 

Whenever you put the URL and click Enter you can see something is happening in the Network tab. 

 

Now click at your endpoint and you can see in the Headers part everything is present related to your API. 

 

Be sure to explore the Preview, Response, Timing, Cookies tab also. 

Preview, Response, Timing, Cookies tab

Step 3: 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.

query parameter

Conclusion

This article describes how you can play around with these Chrome Developer Tools and test your API in case of failure or according to your requirements. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites faster. You can explore many things in this tool, which is very helpful for testing your APIs.

About author

Education Ecosystem is a decentralized learning ecosystem that teaches professionals and college students how to build real products. We are building the world's biggest learning ecosystem for future technology topics such as artificial intelligence, cybersecurity, game development, data science, cryptocurrencies, and programming.