Persist Live Style Changes in the Browser with Chrome DevTools Local Overrides
Chrome DevTools makes it incredibly easy to try out new styles in the browser before we decide to commit anything to our project. It doesn't keep those changes between refreshes by default, though. So if we're running a local dev server, it might destroy our changes before we've had a chance to save them.
The new "Local overrides" tab in DevTools 65 solves this. Any time an edit is made in the DevTools, it copies the original file to a different folder, applies to the change we made to the copy, and then serves that copy instead every time the page is reloaded.
A complementary feature has also been added in the same version of the DevTools: the "Changes" tab. It gives a diff of all of the changes between all the original files and our local overrides.
Both these features add up to a much quicker and safer experience when trying out live CSS changes in the Chrome DevTools.
Instructor: [00:01] Chrome DevTools has always been really handy and quick at letting you try out different styling changes in the browser. In this case, I can just select my card, and I can start reducing the width in here until I like how it looks.
[00:13] If for some reason the page refreshes, all of those changes will be lost. Luckily, there's a new feature in DevTools Version 65 called Local Overrides which actually allows you to persist all of these changes without affecting the project folder at all.
[00:30] To activate that I can just go into my Sources tab, Overrides, and then I'll select the folder for the Overrides. This can be any folder on your machine. It doesn't have to be in your project folder.
[00:44] I'll allow that. Now if I go back to the elements and I start making the same changes again, and I trigger a refresh, all of those changes will be kept.
[00:54] To see what happened, we now have a new folder in the Overrides with a style.css file inside of it. So this is actually an exact copy of my original style.css that I started with, but it has the new value for the width that I've been changing. Chrome actually copied the original one into my Overrides folder and it's now using that instead.
[01:16] Let's say I want to add some new rules instead of editing existing ones. I'll just go in here and I'll add the background color. As expected, that's going to work just fine. What if, however, I want to add some completely new styles?
[01:32] I'll find my button here. I usually just click this Plus button here and let Chrome add the new rule for me. However, by default, it's going to add it to its proprietary inspector-style sheet and that doesn't work really well with Overrides. Instead, I'll hold my mouse on the Plus button and I can select from a bunch of files. In this case, I'll select style.css.
[01:52] What's going to happen now is it's going to add this new style to my style.css Override. I can just add the background color here of red. Now if I go back to my Sources, we're going to see that this new rule has been added at the end of it.
[02:07] As expected, this works with any CSS file, including those coming from other libraries. I'll find the element from my text. You can see here that all of these rules are coming from the Material Design CSS file. I'll just increase the font size by a bit, and I can see it has a little purple dot there.
[02:26] That means that the original file has been copied over to my Overrides. I can confirm that by going to the Sources. We now have a new folder in here with the Material Design CSS file.
[02:37] One limitation of this whole thing is it doesn't work with changes made in the Elements tab. If I change the title, and I refresh the page, it's going to go back to the original title.
[02:49] To get around that I'm going to have to go into my Network Resources, find the HTML file and change the title in here. Again, you're going to see this dot appear which means it's been copied over to my Overrides. Now if I refresh the page, we're going to see the new title.
[03:05] Finally, a really nice complement to this whole workflow is the Changes tab which has been added in this same version of the DevTools. I can go to the three dots here, More Tools, and Changes. If I just expand this, this is going to show us a dev of everything we have been doing in the DevTools.
[03:23] This works with my HTML file. This also works with my CSS. It also works with any JavaScript files I've been changing.