How to load local JS files on live Production sites

As Web developers, we often want to test our local changes directly on production websites — be it for debugging a production bug or for testing local changes before shipping code to production. Tools like Source Maps or Local Overrides don’t often work in our setup. With Requestly, you can map your production files to local files on your machine in less than a minute.

In this article, we will cover how we can load a local version of jQuery on live StackOverflow website.

Here’s a demo video of loading local JS from your machine on production/live stackoverflow.com website.

For this demonstration, We’ve chosen a JavaScript file from StackOverflow. here, we’re using jquery.

Now we have a jquery.min.js which is being loaded from ajax.googleapis.com

We already have a jquery downloaded in our machine which is the development version of 3.6.1. Unfortunately Chrome does not allow loading file based URLs on the live website so we are using a simple HTTP server, for this we refer to http server (https://github.com/http-party/http-server) which is a node module and install this with command: npm install --global http-server

Once installed, we’re able to run HTTP server command on Terminal with a cors option enabled ( http-server --cors)

This will allow us to open all the contents of this directory over localhost:8081

Here we’re able to access our jQuery over 127.0.0.1 which is equivalent to localhost.

In our local jquery version, we added a custom console log statement just to verify that this script has been loaded in stack overflow.

Now we head over to Requestly to configure this.

You can configure a New Rule to modify any part of the traffic. Requestly provides several modification capabilities like setting up redirects or changing the API or the endpoints, modifying headers, modifying API responses.

In our case, we use Redirect Request. Name the rule: load jQuery from local machine and specify that when URL contains jquery.min.js then redirect to our localhost version which is 127.0.0.1:8081/jquery-3.6.1js (localhost: 8081/__) and Save!

Now we go back to StackOverflow and search for jquery, this time you can see our jQuery is loaded.

Under ‘Response’ we can see the console log.

In the console log we can find our custom statement written.

With a single click, we can deactivate this tool after we’re done.

Pro tip: You can also pin the rule! Once you pin the rule you can access your rule in the extension pop-up and directly enable or disable from there.

Hope this helps your testing & debugging workflows faster. If you don’t use Requestly, you can download Requestly from Chrome Web Store and Download Page for other platforms/browsers.

Happy Debugging 🚀

By Sachin Jain, Founder & CEO.

Originally published at https://requestly.com.