Speed Up Development with Chrome’s Local Overrides

Sometimes a front-end developer is at the mercy of code loaded into their app by a network request. Wouldn’t it be nice to quickly replace that request with code of your own and see how your application responds?

As it turns out, this is not a terribly new desire.

Perhaps you have used a man-in-the-middle proxy like Charles Proxy to map your local files on top of live ones, blissfully ignoring 99% of the remaining capabilities of such a tool once you finally get its certificates sorted out.

Perhaps you are more familiar with pushing your changes directly onto your server and using a CMS or screaming into the void to prevent people from using your changes until you’re done developing.

Despite how confidence-inspiring those solutions sound, there’s a better way!

Introducing Chrome’s Local Overrides

Chrome 65 brought Local Overrides upon the world, and there was much applause. Well, at least by me. As you may suspect from the name or linked documentation, this feature lets you make local changes that persist across page reloads.

What might not be clear is that this works for just about any file served as a network request and made available in Chrome DevTools’ Sources tab. As a bonus, using this feature does not require you to directly modify files with Chrome’s DevTools! So you can use an IDE you actually like to make edits.

Let’s walk through how that works!

How to Serve Your Local Files

To demonstrate, we’ll change the behavior of TodoMVC, a popular tool demonstrating JavaScript framework implementations with todo lists.

Open Chrome’s DevTools, choose the Sources tab, then the Overrides subtab.

Hang on, it only gets more exciting from here!

Click ‘+ Select folder for overrides’, pick a folder, and allow the DevTools to access your local filesystem.

Importantly, you’re picking a folder that will store overrides for EVERY site. The subfolders inside this folder will dictate how overriding should happen, which we’ll see in a second. For now, I recommend making an entirely new, empty folder dedicated to this cause.

Folder creation, much more exciting! Really, the useful stuff starts soon.

It’s time to isolate the file that we want to modify. If you don’t know exactly where it was loaded in the Page subtab, you can use the Network tab to reveal where that file lives. Get your right-clicker ready!

For this site, we want to modify the template that generates tasks and make each task look a bit…fancier.

Locate the template.js file in the Network tab, right-click on it, and select 'Open in Sources panel'. Then, right-click the title of the tab that just opened in the code viewer and select ‘Reveal in sidebar.’ Right-click once more on the file highlighted in the sidebar and hit ‘Save for overrides’.

To check if you succeeded, your overridden file should get a little purple circle in the bottom-right corner of its icon.

Actually saving the override. We’re ready to make some local edits!

Now we need to actually introduce some changes and prove the override is working. Head back to the Overrides subtab, expand the folders that contain the file you just saved, right-click your file, and choose ‘Open in containing folder’. Then, use whatever workflow you’re used to for editing JavaScript!

Finally, some plot development AND some JS development!

Save the changes in your editor, then return to Chrome.

Refresh the page; your changes will appear!

Success! This website is 400% better now, but only for us!

How to make this more seamless

I know what you’re thinking: “That’s a cute example, but I’m a modern front-end developer! The files I want to replace are minified and spit out by a build process. How do Local Overrides help with that, huh?”

Chrome won’t suddenly become aware of your entire development workflow after enabling this feature. All it cares about are the files and paths inside the folder you chose for overrides (which, again, I recommend being completely empty when you start!) This means, at worst, you need to make changes to the source files in your local code repo, bundle and build them, locate the built files, copy them to your overrides folder, then refresh Chrome.

Such a hassle!

nodemon can move files to the override location without you needing to intervene all the time. Contorting the example above, I’d use this command:

$ SOURCE=~/repos/examples/dist/template.js;
DEST=~/chrome-overrides/todomvc.com/examples/vanillajs/js/template.js;
npx nodemon --watch $SOURCE --exec "cp $SOURCE $DEST";

This will run in my terminal until I kill the process with a dash of CMD+C. Each time I (or my tooling) changes the file atSOURCE, it’ll be copied to DEST. Then all I need to do is go to Chrome and refresh. My changes will be there immediately!

I’m still looking for ways to make this EVEN FASTER, like auto-refreshing Chrome when there are newly-saved changes. If you know of further improvements, share your wisdom with me!