56

Is there a way to modify an HTTP request using Chrome dev tools or Firebug? For example when developing locally and testing in Chrome, I have a page that needs an HTTP request to fill some data. Because it's local, that service isn't available.

Currently the only way of getting around the problem is configuring a proxy pass in Apache so it hits a QA environment for that call. I'm looking or a simpler way to achieve this because I use Jetty to test the app and can't configure a proxy pass (or that I know of).

In other words, is there a way to create a temporary proxy pass for the current session when testing an app locally?

Improve this question
3
  • 2
    You can try Requestly for modifying HTTP requests in Chrome. It allows you to Rewrite urls, block websites, modify headers etc..
    – Sachin Jain
    Commented Apr 7, 2016 at 13:46
  • Firefox as of 2018 can do it with its builtin Developer Tools (press F12 to activate it).
    – David Balažic
    Commented Nov 15, 2018 at 13:22
  • Does this answer your question? Edit and replay XHR chrome/firefox etc?
    – T.Todua
    Commented Jun 17, 2020 at 23:21

4 Answers 4

Reset to default
84

This might help in some cases - use fetch command to send another, tampered, request. here's how to do it in Chrome:

  1. open DevTools, tab Network
  2. clear
  3. create your request normally
  4. right click that request and select Copy > Copy as fetch
  5. go to Console tab and paste
  6. tamper the data and hit Enter

steps 1-4steps 5-6

Improve this answer
1
  • 6
    The request that I'm making results in a file download. When I do this (paste the fetch in the console), the request appears to be successful, but it doesn't trigger a file download in the browser. Is there a way to save the resulting file?
    – JoeMjr2
    Commented Mar 3, 2022 at 21:34
19

You can use tweak chrome extension and you'll be able to do exactly that, intercept and modify HTTP requests.

Improve this answer
4
  • 2
    This item is 404 now
    – ayanamist
    Commented Jun 28, 2021 at 4:30
  • 1
    chrome.google.com/webstore/detail/tweak-mock-api-calls/…
    – Hvitis
    Commented Jul 27, 2021 at 12:41
  • 1
    This could be the accepted answer. I just successfully used this tweak extension and it was very easy. 5 mins from install to first intercepted request.
    – mandarin
    Commented Sep 14, 2021 at 8:03
  • 2
    You now have to pay to intercept requests with that extension. The free version just allows mocking requests, which is kinda useless as you can already do that with devtools.
    – Samir Aguiar
    Commented Oct 17, 2023 at 18:42
1

I am not sure if this solves your specific problem, but you can use Chrome Overrides to override file contents and response headers for web requests. This documentation https://developer.chrome.com/docs/devtools/overrides/ has been very handy for me when I want to modify a request in a remote environment.

Improve this answer
1
  • Unfortunately this way works only for GET requests without query param handling
    – Udayraj Deshmukh
    Commented Dec 6, 2023 at 12:31
0

I don't know a way to directly intercept and modify all requests in Chrome or Firefox, but for that I am intercepting the requests either at the application level or the network level when debugging if chrome local overwrites are not enough.

At the application level there is the service worker witch via the fetch api can intercept and modify any request the page is making. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

At the network level my go to free app is mitmproxy https://mitmproxy.org/. A man in the middle proxy server that allows to intercept, modify and mock any http request of a device.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.