Education Ecosystem Blog

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.

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:

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. 

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.

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.