Go ProSign in
Autoplay
Hide playlist

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

    Rares MateiRares Matei
    3:33

    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.

    You must be a Member to view code