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?

Killigrew

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.

Petrology

Should work. But I will look out for other proxy solutions which are easier scriptable and free. Can anyone recommend a good one for linux/osx? – Killigrew

UPDATE: I written myself a little proxy which forwards everything from my production server and string replaces the specific <script>-tag. Works great, thanks for the idea. – Killigrew

Man.. I owe you a beer! – Herriott

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

Raymer

If only IT departments did not lock edit access to this file in workplaces from hell for 'security' reasons. >:) – Petrology

Good idea. I will do that. But this solution still involves having all the JS-Code in one file. Would be perfect to have them all separated. – Killigrew

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

Malcah

Interesting attempt. When I run this code it does not reach stage 3. Any ideas on why? – Saponaceous

Does it reach stage 2? – Malcah

Thank you for replying! Yes, it does indeed. I have actually created a thread on this issue https://mcmap.net/q/102570/-replaceing-swapping-javascript-file-in-html-using-greasemonkey/6130540 . – Saponaceous

How to replace with js that I put in a variable in the same script? – Horace

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

Marcellamarcelle

Answer 5

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!

An

This is not a great solution if the original code manipulates the page or adds event handlers. You will end up causing more problems. – Petrology

Sure... I said as much in my answer. But if all you to do is debug your code, just replacing the functions with this technique is enough to be able to set break points in your code and debug it. – An

Answer 6

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.

Drown

Just a quick comment as it was not clear to me: the minified version is what is parsed and executed not the unminified version. – Solomonsolon

@DanielSokolowski yep, you are right. Browser executes the minified version, but shows you the original one (not minified) in the DEV tools, so you can perform step-by-step execution and watch the variables. – Drown

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/

Rinse