Have you ever faced an issue in a production, after a release, that you did not encounter during development? Wouldn’t it be helpful to test your hotfixes against the production environment before deployment?

The solution is one of the features found in Chrome DevTools: Local Overrides.

What is Local Overrides?

Local Overrides is a feature allowing users to make changes in DevTools, and [to] keep those changes across page loads. Previously, any changes that [were] made in DevTools would be lost when [reloading] the page. Local Overrides work for most file types, with a couple of exceptions.*

* What’s New In DevTools (Chrome 65)

Without the need for additional proxy applications or Chrome extensions, such as Charles or Resource Overrides, users are allowed to replace a production file with a local file to Chrome browser.

In this post, I will demonstrate how to set Local Overrides and override local code in production without extra deployments.

Prerequisites

• Chrome (newer than v65)
• Repository access that you are targeting to override
• Built Files

Initial Set-up

2. Set Local Overrides

1. Open DevTools and refresh the page to capture network activities.
2. Click [ Sources ] → [ Overrides ] *.
3. Click [ + Select folder for overrides ] to set the folder where override files will be cloned.
4. Allow permission once Chrome asks you to allow access to the folder.

* If you can’t see the menu, click the [ >> ] icon to see hidden menus. Otherwise, check your Chrome version to make sure it is newer than v65.

If you want to change the folder, set a new one after clicking [ ⊘ Clear Configuration ] and follow these steps again. This will unset the saved overrides in DevTools. However, the cloned files in the previous folder will remain.

Override production file

3. Select js file from network activity

1. In DevTools, switch to [ Network ] tab and find the JavaScript file you want to override among the list of requests. main.js, in this case.
2. You can see the [ Save for overrides ] option on the menu when you right click on the filename.*
3. You will see the cloned file created in the [ Overrides ] section under the folder with the same folder name as the domain that you want to override.

* While Local Overrides supports most common file extensions, some file extensions (e.g. json, xml) are not supported and you will not be able to override the file

4. Build a js file for override

You should now be able to see the file you cloned in your editor as well. Let’s open the file. If the source code is uglified or you have more than minor changes, I would recommend building a js file in the project you want to override. If not, you can modify directly within the cloned file. In this demonstration, I’m going to override the cloned file with a built file.

I made a simple code change here where I replaced the local path of the React logo with the Angular logo url. When you are done making your changes, execute “npm run build” to build the file. Make sure to verify which environment you want to override, since the default environment setting may not be the one you want to override.

When the build process is done, replace the entire source code in the cloned file with the code in the built file. You can replace it in Chrome DevTools as well.

After refreshing the tab, you should be able to see the code changes reflected. You can see here that the spinning logo has been changed from React to Angular.

You can check the changes between the original and overridden files after opening the console in Chrome DevTools (although it is hard to compare if the codes are uglified or minified). You can revert the cloned file back to the original file by clicking the revert button.

Limitations

• If the production filename has changed (e.g. hash value), then you will need to repeat step 3. Select js file from network activity to reassign override file.
• Local Overrides only works with the exact file name as the JavaScript file you want to override. Wildcards will not work in this situation.
• While your changes in Local Overrides will only be seen in your session, you are still working in the production environment, so remember to be cautious.
• Large volumes of code being overridden can overwhelm the tool and prevent the page from completely loading. If that happens, opening a new tab to start fresh can resolve the issue.

Conclusion

You can use this within any environment, including production, staging, or even local (if you want). I hope you find this post helpful.