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

User · Answer

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

User · Answer

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    x000D   x000D  fetch  https   jsonplaceholder typicode com posts 1   x000D     then res   gt  res json    x000D     then console log  x000D   x000D   x000D    Or to POST a new resource    x000D   x000D  fetch  https   jsonplaceholder typicode com posts     x000D    method   POST   x000D    body  JSON stringify   x000D      title   foo   x000D      body   bar   x000D      userId  1 x000D        x000D    headers    x000D       Content-type    application json  charset UTF-8  x000D      x000D     x000D   then res   gt  res json    x000D   then console log  x000D   x000D   x000D    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

User · Answer

Expanding on  dhfsk answer  Here s my workflow   From Chrome DevTools  right-click the request you want to manipulate   Copy as cURL  Open Postman Click Import in the upper-left corner then Paste Raw Text

User · Answer

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

User · Answer

if you use jquery on you website  you can use something like this your console   x000D   x000D    post  x000D       dom data-home php   x000D        x000D      type    home   id    0  x000D        function data   x000D          console log data  x000D         x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

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  gt  Copy as cURL Paste to the command line  command includes cookies and headers  Edit request as needed and run

User · Answer

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

User · Answer

x000D   x000D    post  x000D       dom data-home php   x000D        x000D      type    home   id    0  x000D        function data   x000D          console log data  x000D         x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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   lt url gt         then data   gt  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

User · Answer

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  amp  modify the requests     For further instructions  review the github page

User · Answer

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   gt  res json         then console log

[google-chrome] Making HTTP Requests using Chrome Developer tools

Examples related to google-chrome

Examples related to google-chrome-devtools