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 a live StackOverflow website.
Here’s a demo video of loading local JS from your machine on the 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 jquery downloaded on 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 (github.com/http-party/http-server), which is a node module and install this with the command: npm install --global http-server
Once installed, we’re able to run the HTTP server command on the 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 the 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, and modifying API responses.
In our case, we use Redirect Request. Name the rule: load jQuery from the local machine and specify that when the 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.
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 🚀