REST API Testing: How to get response using Google Chrome developer tools?

Question

I'm very new to API testing.

I'm trying to make use of Google Chrome's developer tools to understand and explore this subject.

Question 1:
Is it possible to get the response (possibly in JSON format) of a simple GET request using chrome developer tools?

What I'm currently doing is:

Open chrome developer tools

Go to Network tab

Clear existing logs

Send a post request simply by hitting a URL. e.g. https://stackoverflow.com/questions/ask

Check the corresponding docs loaded

Question 2:
What are the relevance "Reponse Headers" shown on the image above? I mean, am I correct to think that this is the response I am getting after doing the GET request?

Any help or references you can give are much appreciated!

Answer 1

If you want to test a rest api I sugest you get postman which is meant for that purpose.

Going to your questions:

Question 1: Is it possible to get the response (possibly in JSON format) of a simple GET request using chrome developer tools?

The first point to make clear is that it is the server who will or will not send a json response to the browser. Not the browser who can choose to see any response as json.

If you send a GET request that the server responds with a json object or json array and the Content-type header is set to application/json, you will see that response already formated in the main window of the browser.

If the Content-type is set to text/html, for example, then you will still get the a json text as response in the main window but it won't be nicely formated. Depending on how the response was sent, sometimes you can see it nicely formatted by left clicking the browser window and selecting view source page.

For this you don't need developer's tools unless you want to see how long did it take to receive the response, or check the headers for some specific value, etc, but nothing to do with receiving the response or rendering it on screen.

Developer's tools is more usefull if you are working with javascript/jquery and/or if you are sending ajax requests (GET or POST). In these cases you can debug the function and also see the ajax request to check what actually went out from your browser and what was received as a response.

Question 2: What are the relevance "Reponse Headers" shown on the image above? I mean, am I correct to think that this is the response I am getting after doing the GET request?

In the response you get the two things, the headers, and the content. The json objects you see are part of the content not the headers.

The headers will tell the browser, for example, that the body is json (vs. an html documenet or something different), besides of other information like cache-control, or how long the body is.

Search for http headers for more information on which are teh standard headers.

Answer 2

To answer your questions narrowly:

Is it possible to get the response (possibly in JSON format) of a simple GET request using chrome developer tools?

Yes! Just click the Response tab, which is to the right of the Headers tab that's open in your screenshot.

What are the relevance "Reponse Headers" shown on the image above? I mean, am I correct to think that this is the response I am getting after doing the GET request?

Yes, these are the HTTP headers that were sent with the response to your request.

The broader question here is "how do I test a REST API?" DevTools is good for manual testing, but there are automated tools that can make it more efficient. I'll leave that up to you to learn more about that broad topic.