How to replace Javascript of production website with local Javascript?

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.

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"></script>

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

To add a NEW file you can use something like one of the other post:

document.body.appendChild(document.createElement("script").src = "http://example.com/addThisJSFile.js");

This tampermonkey script can replace any JS file on a webpage with your custom one from a domain:

// ==UserScript==
// @name         ReplaceJS
// @namespace    http://example.com/
// @version      1.0.0
// @description  Replace javascript files on any webpage!
// @author       Mr.Sonic Master
// @match        *
// @run-at       document-start
// ==/UserScript==

var newJSFile = "http://example.com/newJSFile.js"; //The JS file to load in replacment od old JS file

var oldJSFile = "oldJSFile.replaceThis.js"; //The old JS file as it is named in inspect element (make sure its spelled EXACTLY the same)

var pattern = new RegExp(oldJSFile, "i"); //Create the RegExp pattern with the /i switch to make it case-insensitive

function injectScript(originalPage) { //Function injectScript replaces the file
    console.log('Replace stage 2: Replace text matching', oldJSFile, 'with', newJSFile);
    var moddedPage = originalPage.replace(pattern, newJSFile); //Modify the HTML code that we got, replacing the old JS file with the new one
    document.open();
    console.log('Replace stage 3: Write new HTML to page...');
    document.write(moddedPage); //Write to the page the new HTML code
    document.close();
}

setTimeout(function() { //Wait a bit for the page's HTML to load...
    console.log('Replace stage 1: target HTML');
    injectScript(document.documentElement.outerHTML); //Run function injectScript with the page's HTML as oldPage in the function
}, 1111);