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?

回答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.

回答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

回答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

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

回答4:

If your web page has jquery in your page, then you can do it writing on chrome developers console:

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

Its jquery way of doing it!

回答5:

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

回答6:

If you want to do a POST from the same domain, you can always insert a form into the DOM using Developer tools and submit that:

回答7:

if you use jquery on you website, you can use something like this your console

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

回答8:

Keeping it simple, if you want the request to use the same browsing context as the page you are already looking at then in the Chrome console just do:

window.location="https://www.example.com";

回答9:

To GET requests with headers, use this format.

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)

回答10:

I had the best luck combining two of the answers above. Navigate to the site in Chrome, then find the request on the Network tab of DevTools. Right click the request and Copy, but Copy as fetch instead of cURL. You can paste the fetch code directly into the DevTools console and edit it, instead of using the command line.

回答11:

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

来源：https://stackoverflow.com/questions/14248296/making-http-requests-using-chrome-developer-tools