Open any web application that you want to use chrome overrides in chrome browser and hit F12 to access developer console.

For example this web site https://burakcive.azurewebsites.net :)

If you go to sources-> page -> Home directory, you can see my home.js file that retrieves the posts from server.

So we want to change it in order to test something or anything you might imagine. We will override this home.js which is coming from server to a file from our file system.

First, go to overrides and select a folder from your local disk.

Then it will look like that.

Then go to pages and home.js again right click and select Save for Overrides.

Now, you can go to that folder from your local disk and make any change you want. Chrome will override the file with the JS file in your local system.

For instance we want to change this line to increase the time of the spinner.

setTimeout(() => { document.getElementById("load-more-spinner").style.display = "none"; }, 200);

Lets make it 20000.

Open the file with any editor you want, change and save it.

Now if I refresh the page and see the home.js it will be reflected.

This is very powerful tool because most of the JS files in the production are minified. If you have the source you are working with as unminified, you can change the production JS files to their unmodified versions in your local disk to make test in the production environment safely. Because you are not changing anything in the server.

There are some cases you can not detect a problem without deploying the project to server. With this method, you can do it easily without getting yourself in trouble of deployment or any kind. It is also nice to double check everything before deployment. You can see how things get effected when they are deployed to the server without actually deploying them.

You would need to remove overrides after you are finished. If you forget them, it can mislead you in the future.

Cheers...

https://drive.google.com/file/d/1V_cXK7_zfpaHyp7WOfhxY3KNW8ViMhMj/view?usp=sharing