debugging - 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"></script>
<script src="http://localhost/js/mycode2.js"></script>
...

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

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.