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.

Answer 2

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

Answer 3

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

Answer 4

Without using any web proxy below chrome feature can be used to apply local overrides for js and css files https://developer.chrome.com/blog/new-in-devtools-65/#overrides

Answer 5

Though the epascarello's solution works, there is a quicker solution for the minified files debugging. Consider using JavaScript source maps. Modern Firefox and Chrome supports them.

The idea of source map is to say browser where to find the unminified version. When you start the debugging in your browser developer tools - browser loads unminified version of the script and shows you the easy-to-read JavaScript (or whatever code you compiled to JavaScript) code in the debugger.

Answer 6

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!

Answer 7

Add something to your URL to distinguish between your dev and prod context ; example : http://url_of_prod.com

http://url_of_dev.com?debug=true

and then, use some javascript to check if the GET variable debug is ON or NOT or check the URL with
if (window.location.host.indexOf(‘url_of_dev’) > -1) ...

THEN USE a load function to load or not your file, as in this example : http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/