When the URL entered into the Chrome address bar results in the Save As dialog being popped (Content Type is not recognised), the network request never appears in the network tab in dev tools.
Is there a way I can track this to see the response headers from within Chrome, ie. without resorting to external tools like tcpdump or fiddler?
Yes, it's possible to access the request/response data in a more raw form using the network internals interface provided in Chrome. Navigate to chrome://net-internals/ (can't make it a link)
Click on the 'Events' links to see the recent requests and active sockets. I recommend using the filter at the top to remove some of the noise.
Select the relevant entry corresponding to the source type URL_REQUEST.
On the right hand side, you will see a whole load of data, but the request headers will appear under the HTTP_TRANSACTION_SEND_REQUEST_HEADERS section, and the response headers will appear under the HTTP_TRANSACTION_READ_RESPONSE_HEADERS section.
The following is an example from a simple Node server I set up to return a response with the 'Content-Type': 'application/octet-stream'} header. This forces the browser to download.
Related
Using the Search pane in Chrome DevTools seems to yield results only within the response's scope (Response Headers and the Response itself) for each and every recorded resource.
But when it comes to searching for a specific string/regex within the Request scope, either the Request Headers or the Request Body itself, the Search pane doesn't yield and results and outputs "No matches found.".
The official Chrome Developer documentation doesn't explicitly state the Search pane searches within the request stating:
Use the Search pane when you need to search the HTTP headers and
responses of all resources for a certain string or regular expression.
Am I missing something that is already natively integrated within the DevTools or should I just come up with a workaround like exporting the recorded resources as a HAR file, and then look it up using a Text Editor, or alternatively, as I'm looking for a way to do so on the fly, overriding the XmlHttpRequest object, logging all the request to the console and search it in there?
Just looking for a quick and easy way to find those resources by string/regex within the DevTools itself...
I'm working with an API that doesn't yet have CORS setup. So, instead of waiting until that's setup, I thought I could use fiddler to add the Access-Control-Allow-Origin header to the responses coming from the server. I haven't used fiddler for a while and can't figure out how to add headers to the response. Is this not supported in the free version of fiddler-everywhere?
It's not ideal, but I found a workaround. After the requests have gone off once, I right-click the ones I'm interested in and select "Add new rule". The rule will automatically do an exact match to the URL and sets the action of "Return manually crafted response" If I edit the rule, the header can be added in the raw text.
Can I have less header in network tab? (picture)
The Requests table displays the following columns by default:
Name The filename of, or an identifier for, the resource.
Status The HTTP status code.
Type The MIME type of the requested resource.
Initiator The following objects or processes can initiate requests:
Parser Chrome's HTML parser.
Redirect An HTTP redirect.
Script A JavaScript function.
Other Some other process or action, such as navigating to a page via a link or entering a URL in the address bar.
Size The combined size of the response headers plus the response body, as delivered by the server.
Time The total duration, from the start of the request to the receipt of the final byte in the response.
Waterfall A visual breakdown of each request's activity.
Add or remove columns
Right-click the header of the Requests table and select an option to hide or show it. Currently displayed options have checkmarks next to them.
I want to use Postman to test server side validation so I used the browser to submit (valid) data to the server and in the network tab of Chromes developer tools used "Copy as cURL". Then, in Postman, Import->Paste Raw Text -> Import.
If I look at the request body the data appears on x-www-form-urlencoded tab and every value has a '^' character appended to it. e.g. JobId: 75051^
When I post it the server validation picks it up as invalid data e.g.
The value "75051^" is not valid for JobId
Edit
If I use "Copy as C=cURL(bash)" instead, the ^ characters are removed but the server doesn't like the encoding used on dates and times. e.g. T
The value '11%2F19%2F2018+12%3A15+AM' is not valid for Work Start Time
What is going on here? Can I get "Copy as cURL" to pick up my data correctly, or is there a better way to pick up the request and get it into Postman?
I found a better way to pick up the request and get it into Postman:
Install the Postman Chrome App instead of the desktop
app.
Install the Postman Interceptor Extension.
Open Postman and click on the Interceptor icon in the toolbar to switch the
toggle to “on”.
Browse to your website: the requests appear in Postman's history.
Go to Interceptor missing from native apps #1667 and vote for it
Reference:
Postman Interceptor Extension Documentation
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!
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.
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.