Persist Live Style Changes in the Browser with Chrome DevTools Local Overrides

InstructorRares Matei

Share this video with your friends

Send Tweet

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.

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

~ 2 years ago

Does this work with sass?