How to replace Javascript of production website with local Javascript?

Question

On my production website, I have compiled Javascript.

<script src="/js/mycode.min.js"></script>

It would be very convient for debugging if I could make my browser replace that with

<script src="http://localhost/js/mycode1.js"&gt;&lt;/script&gt;
<script src="http://localhost/js/mycode2.js"&gt;&lt;/script&gt;
...

I know I could manipulate the DOM using something like Greasemonkey userscripts, but I couldn't come up with a solution which would prevent the execution of "mycode.min.js".

Any ideas?

Answer 1

What about using a subdomain like http://static.example.comfor static files (e.g. .js files), and changing the hostfile?

<script type="text/javascript" src="http://static.example.com/js/mycode.min.js"&gt;&lt;/script&gt;

Add the following line to the hostfile (/etc/hosts for Linux, C:\WINDOWS\System32\drivers\etc\host):

static.example.com 127.0.0.1

Of course you've to run a server with the files from http://static.example.com/ on 127.0.0.1.

Another solution is using a (local) proxy server like Privoxy for redirecting http://example.com/js/ to http://localhost/js/.

Answer 2

The way I do it:

1. Download and install Fiddler if you are on windows.
2. Enable it to catch http traffic [IE/Chrome does it by default, Firefox - enable it through the add on it installs]
3. Load up the page in question.
4. Find the file you want to replace in the http traffic list on the left and click on it.
5. On the right there is an AutoResponder tab. click on it.
6. Click on the checkbox to "enable automatic responses"
7. Click Add.. button
8. The 2nd dropdown on right, choose the option that says "find a file"
9. Locate the file in the dialog and click save
10. Repeat steps 4-9 until you replace all the files you want to replace
11. Refresh the browser window and your new js files are running

Instead of replacing the js file, you can replace the html file and change the js links on the page.

You can install Charles if you are on a mac/linux. (not free, has trial) Steps are similar, but not the same.

If you are using Google Closure to compress files, you can install their plug-in to do the source mapping.

Answer 3

Assuming your scripts are simply the raw version of the production file, you can just crack open your favorite debugger or JS console and import your scripts:

document.body.appendChild(document.createElement("script")).src = 
    "http://localhost/js/mycode1.js";

Doing so will overwrite the originally defined functions and variables. You'll have to manually re-run window.onload. If you have script that runs immediately or on load that changes much on the page, you may have some work to do to get it back to the original state.

Good luck!