Making HTTP Requests using Chrome Developer tools

Is there a way to make an HTTP request using the Chrome Developer tools without using a plugin like POSTER?

Solution 1:

Since the Fetch API is supported by Chrome (and most other browsers), it is now quite easy to make HTTP requests from the devtools console.

To GET a JSON file for instance:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

Or to POST a new resource:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(res => res.json())
.then(console.log)

Chrome Devtools actually also support new async/await syntax (even though await normally only can be used within an async function):

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

Notice that your requests will be subject to the same-origin policy, just like any other HTTP-request in the browser, so either avoid cross-origin requests, or make sure the server sets CORS-headers that allow your request.

Using a plugin (old answer)

As an addition to previously posted suggestions I've found the Postman plugin for Chrome to work very well. It allow you to set headers and URL parameters, use HTTP authentication, save request you execute frequently and so on.

Solution 2:

If you want to edit and reissue a request that you have captured in Chrome Developer Tools' Network tab:

• Right-click the Name of the request
• Select Copy > Copy as cURL
• Paste to the command line (command includes cookies and headers)
• Edit request as needed and run

Solution 3:

I know, old post ... but it might be helpful to leave this here.

Modern browsers are now supporting the Fetch API.

You can use it like this:

fetch("<url>")
    .then(data => data.json()) // could be .text() or .blob() depending on the data you are expecting
    .then(console.log); // print your data

ps: It will make all CORS checks, since it's an improved XmlHttpRequest.

Solution 4:

Expanding on @dhfsk answer

Here's my workflow

1. From Chrome DevTools, right-click the request you want to manipulate > Copy as cURL

2. Open Postman

3. Click Import in the upper-left corner then Paste Raw Text