1

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.

4
  • one trick i sometimes use is sniffing for location.hash, and depending on if it contains "debug" or not, addScript() one url or another instead of hard-coding the script tag.
    – dandavis
    Apr 30, 2013 at 16:15
  • Maybe Creating a chrome extension or Loading JQuery into a Chrome extension helps.
    – Ikrom
    Apr 30, 2013 at 16:57
  • DevTools Redirect looks like the right kind of extension. Still I might write my own to handle things like offline development where CDNs are unavailable. Maybe that would be cool.
    – Tom Rees
    May 1, 2013 at 13:48
  • @TomRees If you are still struggling with this problem, I have a solution for this which I have posted in the answer. Hope it helps!!. But this is chrome only solution. I am still not sure how can we redirect requests in firefox Oct 31, 2015 at 1:30

4 Answers 4

2

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.

1
  • Thanks for the hint - manifests will be useful for solving another issue I have. Unfortunately in this case I don't want to change a single line of live code, just load different resources. I have found a browser plugin at last to do this.
    – Tom Rees
    May 1, 2013 at 13:45
1

You can do this with fiddler.

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

http://fiddler2.com/

2
  • Fiddler looks like a great tool. Unfortunately I'm on a Mac :-/
    – Tom Rees
    May 1, 2013 at 13:43
  • bummer...i discovered this feature a while ago for exactly the case you describe, when you need to load everything from the live server except a locally edited file and have the browser treat that file like it came from the live server. Works great, I'll need to give that chrome plugin a try.
    – Woody
    May 2, 2013 at 10:40
1

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

1

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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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