359

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

leojh
  • 7,160
  • 5
  • 28
  • 31
  • 1
    Are you hoping to make requests cross-domain, or on the same domain in which you opened the developer tools? – Lukas Jan 09 '13 at 23:31
  • 6
    For all the people wanting this feature -- star this Chromium issue: https://code.google.com/p/chromium/issues/detail?id=106443&q=label%3AFeature-DevTools%20time&sort=-stars&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary%20Stars – Ivan Zuzak Jan 10 '13 at 20:06
  • 10
    Firefox is a better option for this. just right-click on the request and resend or edit and resend. – imbr Aug 21 '17 at 19:10
  • 1
    All were useful answers, just wanted to add a tool I find pretty useful [Advanced Rest Client](https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo). Using this can help one save a lot of time in the long run if one is going to make multiple API requests. – Sagar Ranglani Oct 18 '16 at 13:01
  • @eusoubrasileiro: Thanks. The Edit&Resend button in the network tab in Firefox to resend a request is really nice feature. Hope someone raises a request to add it in chrome as well – firstpostcommenter Nov 10 '19 at 10:31

15 Answers15

382

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.

Christofer Eliasson
  • 32,939
  • 7
  • 74
  • 103
  • 3
    Since the op accepted an answer using Postman: If you right-click the request in the dev-tools and "Copy as cURL" you can then import the cURL command into Postman to resend / alter the request. See: https://www.getpostman.com/docs/postman/collections/data_formats -> "Importing as cURL" – dhfsk Jun 09 '17 at 14:11
  • 1
    How to make a post request ? – Nuhman Apr 18 '18 at 07:22
  • 9
    @Nuhman Fetch takes a second argument where you can configure the request `fetch("/echo/json/", { method: "POST", body: data })` – Christofer Eliasson Apr 18 '18 at 15:35
  • 6
    Note that it's also possible to [Copy as fetch](https://bugs.chromium.org/p/chromium/issues/detail?id=573371) any request from Chrome Dev Tools network history. – Vadzim Aug 29 '19 at 05:47
  • How to specify mode no cors? – mathtick Jun 09 '20 at 10:08
  • 1
    @mathtick There is a `mode` request option you can use: `fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }`. Note that mode: "no-cors" only allows a limited set of headers in the request. [More info about using fetch and no-cors](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) – Christofer Eliasson Jun 09 '20 at 14:19
199

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

enter image description here

apricot
  • 3,599
  • 3
  • 19
  • 20
  • 16
    Firefox allows you to edit the call before replay, but there is no such option in chrome, so above answer is the way to go – Tofeeq Jun 12 '17 at 11:08
  • 5
    With chrome 63+, pasting CURL in console is not working. – Ravi Parekh Aug 22 '18 at 05:10
  • 4
    @RaviParekh I don't think he meant Chrome console, he meant the OS command line – Korayem Sep 18 '18 at 12:10
  • Didn't know that @Tofeeq, haha. Thx. I could definitely test not my Post request on firefox. I wonder why chrome doesn't have it. :/ – iamjoshua Aug 19 '19 at 03:31
  • 11
    [Copy as fetch](https://bugs.chromium.org/p/chromium/issues/detail?id=573371) allows to reissue altered requests directly from Chrome Dev Tools console and is viable alternative for those who doesn't have cURL or desire to bother with it. – Vadzim Aug 29 '19 at 05:52
  • 3
    But using curl, sometimes the result is not the same. I came here to know if I could request from browser. USing browser's javascript. It allows me reproduce CORS issues, what a curl from my terminal should not enlight me. – Garry Dias Apr 13 '20 at 02:57
  • To clarify Vadzim's comment: Select Copy as fetch from the menu shown above, then paste into the dev console and add the "then(...)" methods as seen in Christofer's answer to view the response. – Z. Cochrane Apr 19 '20 at 21:08
52

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.

tomblue
  • 1,079
  • 1
  • 12
  • 19
30

Expanding on @dhfsk answer

Here's my workflow

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

  2. Open Postman

  3. Click Import in the upper-left corner then Paste Raw Text Postman Paste Raw Text cURL from Chrome
Korayem
  • 12,108
  • 5
  • 69
  • 56
16

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!

sadaf2605
  • 7,332
  • 8
  • 60
  • 103
  • 14
    This assumes the web page will use jQuery – mikemaccana May 07 '14 at 14:48
  • 2
    Remember this is only for `GET` requests, if you want to do other types of requests, you may want to make use of `$.ajax` – aksu Apr 16 '16 at 15:24
  • @mikemaccana You can load jQuery into any page via console. – nehem Feb 08 '17 at 02:02
  • 1
    Like this `var script = document.createElement("script"); script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"; document.body.appendChild(script);` – nehem Feb 08 '17 at 02:03
  • 1
    @itsneo answer was right on spot! Way to load jquery if the page being accessed doesn't have it already. Then you can use $.ajax or equivalent, without need of a plugin – Renato Chencinski Aug 08 '17 at 19:06
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.

Aaron Parke
  • 103
  • 1
  • 4
8

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:

Inserted form into document

Craig Curtis
  • 853
  • 10
  • 24
7

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)
Nirojan Selvanathan
  • 10,066
  • 5
  • 61
  • 82
2

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>
Nazor
  • 21
  • 4
1

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";
Dave Potts
  • 1,543
  • 2
  • 22
  • 33
1

$.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>
1

You can edit/resend a request in Firefox's Inspector without using any 3rd parties like so:

  1. Press F12 to open the inspector in Firefox ▶ go to the Network tab
  2. Find your API request and click on it so the 'Headers' section will appear to the right (you can filter in the bar on top)
  3. The 'Header' tab comes with a Resend button, here you can either Resend or Edit and Resend

Screenshot

cursorrux
  • 1,382
  • 4
  • 9
  • 20
saso risa
  • 11
  • 1
1

Using modern async/await javascript sintax you could do it as follow below.

const options = {method: 'GET', Content-Type: 'application/json'};
let res = await fetch('https://yourdomain.com/somedata.json', options);
let json = await res.json();

It will make all CORS checks (Cross-Origin Resource Sharing). Case the web server already allow CORS from all domains you are ready to go. Case you need enable CORS on the web server follow below 2 cases: one with nginx and another with node express.

Enable CORS with NGINX

Enable CORS from all websites If you want to enable CORS for all websites, that is, accept cross domain requests from all websites, add the following

add_header Access-Control-Allow-Origin *;

Enable CORS from one domain

add_header Access-Control-Allow-Origin "stackoverflow.com";

Enable CORS with Express

With node it's just install cors with yarn add cors, and then use it

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})
Cassio Seffrin
  • 7,293
  • 1
  • 54
  • 54
0

Yes, there is a way without any 3rd party extension.

I've built javascript-snippet (which you can add as browser-bookmark) and then activate on any site to monitor & modify the requests. :

enter image description here

For further instructions, review the github page.

T.Todua
  • 53,146
  • 19
  • 236
  • 237
  • You should probably disclose that this is *your* library, as is required by [the help center page about self-promotion](https://stackoverflow.com/help/promotion). – zcoop98 Sep 24 '20 at 14:55
0

The shortest way is:

await (await fetch('<URL>')).json()
Oz Ben-David
  • 1,589
  • 1
  • 16
  • 26