Trick a browser into loading <script> or <link rel="stylesheet"> URLs from local setup/server?

StackOverflow https://stackoverflow.com/questions/16302907

Question

I'm debugging a CSS/JS problem on a live website, and in this situation it is unfeasible to clone the entire production system onto a local machine to fiddle with 2 lines of code.

I would LOVE it if there were a simple way to trick a browser (FF, Chrome, anything - I'm not fussy) into loading the live site but redirecting certain internal URLs to a local webserver. Any ideas?

eg. I want to load the entire live website, except one specific Javascript file. The attempt to access http://...production.../js/map.js should be rerouted to http://localhost/debug/js/map.js, which I can edit locally until the problem is fixed.

Was it helpful?

Solution 3

I have found a Chrome extension which, despite its bugs, achieves precisely this behaviour. DevTools Redirect: https://chrome.google.com/webstore/detail/devtools-redirect/jmhdebkkippcccflcoddckhjjfgnfhnp

This allows developers to specify JS or CSS files to redirect, and a new URL to grab them from (eg. http://localhost/.../debug.js).

OTHER TIPS

Edit re-read your issue, if you aren't happy to find/edit the SQL database for the file in question, you could always just add an adblock rule against it, and manually run your own script from console/greasemonkey it in.

Answer to question in the title:

HTML5 has a feature called an "application cache" just for this. It involves adding a manifest attribute to your <html> tag.

<html manifest="what_to_cache.appcache">

Then in what_to_cache.appcache,

CACHE MANIFEST
http://...production.../js/map.js

Future requests of items listed in the manifest will thereafter be loaded from the cache, if available, even if the user is offline. The file is stored in an SQL database for that website, so you can thereafter edit the database.

You can do this with fiddler.

Use the AutoResponder to intercept URLs and return content from local file or different server.

http://fiddler2.com/

For future readers I would like to answer this question. Have a look at

Requestly - A Chrome Extension to modify Network Requests.

You can setup a Redirect Rule Request following these steps:

  • Select Redirect Request Rule Type

Rule Type Cards

  • Create a new Redirect Rule

Creating a Redirect Rule

Disclaimer: I have created this So you can blame me if you do not find this helpful :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top