Making HTTP Requests using Chrome Developer tools
Google ChromeGoogle Chrome-DevtoolsGoogle Chrome Problem Overview
Is there a way to make an HTTP request using the Chrome Developer tools without using a plugin like POSTER?
Google Chrome Solutions
Solution 1 - Google Chrome
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 - Google Chrome
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 - Google Chrome
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 - Google Chrome
Expanding on @dhfsk answer
Here's my workflow
Solution 5 - Google Chrome
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!
Solution 6 - Google Chrome
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:
Solution 7 - Google Chrome
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.
Solution 8 - Google Chrome
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)
Solution 9 - Google Chrome
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>
Solution 10 - Google Chrome
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";
Solution 11 - Google Chrome
$.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>
Solution 12 - Google Chrome
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. :
For further instructions, review the github page.
Solution 13 - Google Chrome
You can edit/resend a request in Firefox's Inspector without using any 3rd parties like so:
- Press F12 to open the inspector in Firefox ▶ go to the Network tab
- 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)
- The 'Header' tab comes with a Resend button, here you can either Resend or Edit and Resend