Test your production UI code without deployment using Chrome DevTools

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.


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

Initial Set-up

1. Create a folder to allow save cloned files from Local Overrides

I would recommend creating a new folder for your own security, instead of choosing an existing folder that includes other files. I also find it is easier to create a new folder at the same level as the build folder. This makes it easier to copy the code from the files built for overriding.

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.


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


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

About the Author

Eliot Lee profile.

Eliot Lee

Leave a Reply

Your email address will not be published.

Related Blog Posts
Building Better Data Visualization Experiences: Part 1 of 2
Through direct experience with data scientists, business analysts, lab technicians, as well as other UX professionals, I have found that we need a better understanding of the people who will be using our data visualization products in order to build them. Creating a product utilizing data with the goal of providing insight is fundamentally different from a typical user-centric web experience, although traditional UX process methods can help.
Kafka Schema Evolution With Java Spring Boot and Protobuf
In this blog I will be demonstrating Kafka schema evolution with Java, Spring Boot and Protobuf.  This app is for tutorial purposes, so there will be instances where a refactor could happen. I tried to […]
Redis Bitmaps: Storing state in small places
Redis is a popular open source in-memory data store that supports all kinds of abstract data structures. In this post and in an accompanying example Java project, I am going to explore two great use […]
Let’s build a WordPress & Kernel updated AMI with Packer
First, let’s start with What is an AMI? An Amazon Machine Image (AMI) is a master image for the creation of virtual servers in an AWS environment. The machine images are like templates that are configured with […]