Making HTTP Requests using Chrome Developer tools

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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!

Answer 4

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

Answer 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

Answer 6

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";