11

Just had a quick question to throw out and see if there was a solution for this...

Let's pretend I have no access to the server. I load up a webpage and find out that they have a Javascript file loading from a subfolder (let's say /scripts/js/some.js)

Now, I want to make changes to this file locally and test it against the whole site without downloading the entire site to a local folder.

Does anyone know of a way I can override the loading of that remote js file in favor of a local/edited copy of it?

Andir
  • 2,063
  • 1
  • 15
  • 22

5 Answers5

4

If you want a way to use a local file instead of a remote file (in any web browser), I highly recommend Charles Web Proxy. http://www.charlesproxy.com/

In Charles, go to the Tools menu and select Map Local. Add a new mapping by entering the address of the file on the web you would like loaded from your disk.

Edit Mapping Example

This technique will for all sorts of files (JavaScript, CSS, SWF). Of course you have the option to temporarily disable this feature, and it will only work while Charles is running. Very handy.

Kyle Ridolfo
  • 623
  • 5
  • 13
4

Try using noscript or adblock to block the server side script from loading. Then use greasemonkey to load your own script.

Mike Park
  • 10,845
  • 2
  • 34
  • 50
4

I actually found a solution for this. Posting details for anyone that comes here looking for it.

Privoxy (www.privoxy.org/) [Free] Allows this for the most part through a redirect. Though Firefox may block the redirect depending on where you put it. This means you most likely will not be able to save the file locally and reference it via file://etc/

( I wish I had a way to tell you how to statically fiddle with JavaScript on web pages you have limited access to... but I have not found it. If an answer comes along I will accept it over this. )

Of course, you have to set up Privoxy, and use it as a local proxy server. It's pretty simple if you only use it temporarily: Just point your browser to proxy 127.0.0.1 on port 8118 with it running.

You have to add a redirect "default action" (Options > Edit Default Actions) to redirect the browser to use your new copy:

{ +redirect{/newLocation/some.js} }
 /scripts/js/some.js
Andir
  • 2,063
  • 1
  • 15
  • 22
1

While your solution with proxy is somewhat more permanent, I found that with Fiddler you can do it with almost no configuration:

How to replace Javascript of production website with local Javascript?

Community
  • 1
  • 1
Goro
  • 9,919
  • 22
  • 74
  • 108
0

In a browser that supports FileReader such as Chrome, yes, in combination with 'eval' to execute arbitrary JS. In your HTML add a button for the user to press:

<form>
    <input type="file" name="file"
        onchange="loadJS(event.target.files);">
</form>

In your scripts add:

function load() {
  var reader = new FileReader();
  reader.onload = function(evt) {
    eval(evt.target.result);
  };
  reader.readAsText(files[0]);
}
Jim Blackler
  • 22,946
  • 12
  • 85
  • 101
  • I think you misunderstood. We are pretending I have no access to the server/files and could not add script to the page to load a local file. Think of it like this: You would like to copy down a javascript file from (let's say) Google, modify it and use your local copy instead of their remote copy. – Andir Apr 01 '11 at 16:52
  • Something more than just using Firebug or Chrome Developer Tools to modify the script? – Jim Blackler Apr 01 '11 at 16:57
  • 1
    Yeah, editing the script in Firebug/Chrome Dev would get reloaded when you visited another page (if I'm not mistaken) and all changes you made would be lost. (And now that's I'm digging into it, I can't seem to even edit the remote JS file locally in Firebug... not sure about Chrome.) – Andir Apr 01 '11 at 17:01