CODEWITHSUNDEEP
javascriptdebuggingwebbrowserbrowser-plugin
Tom Rees
Tom Rees

Reputation: 671

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

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.

Upvotes: 1

Views: 856

Answers (4)

Sachin Jain
Sachin Jain

Reputation: 21842

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

Upvotes: 1

Tom Rees
Tom Rees

Reputation: 671

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

Upvotes: 1

Woody
Woody

Reputation: 8002

You can do this with fiddler.

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

http://fiddler2.com/

Upvotes: 1

Paul S.
Paul S.

Reputation: 66304

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.

Upvotes: 2

Related Questions