Persist CSS Changes Done in Chrome’s Dev-Tools

February 24, 2021 • 4 min read

Chrome DevTools interface showing the problem of losing CSS changes on refresh

THE PROBLEM

Using your dev tools to tinker with CSS is great because you get immediate feedback on the changes. However, if the page is refreshed, all those changes get lost in oblivion…

A SOLUTION

Here’s a quick tip to persist those changes without affecting your original source files.

  1. Open Chrome's dev tools.
Chrome DevTools opened showing the main interface
  1. Press ctrl/cmd + shift + p to show Chrome's dev tools command menu.
Chrome DevTools command menu opened with search input
  1. Type “show overrides”.
Chrome DevTools command menu showing 'show overrides' option
  1. Tap on “+ Select folder for overrides” on the left side and select a folder on your machine. That’s where your overrides will live.
Chrome DevTools showing the overrides folder selection
  1. Allow Chrome to access this folder by tapping “Allow” on the bar that appears below the search bar.
Chrome DevTools showing folder access permission prompt
  1. Now the folder has appeared on the “Overrides” section.
Chrome DevTools overrides tab with selected folder
  1. Let’s try it! Change some styles in the “Elements” panel. You’ll see a purplish dot next to the stylesheet file name, which means it has been saved locally in our overrides folder. Refreshing the page will keep that change!
Chrome DevTools showing CSS changes saved with purple dot indicator
  1. Now back in the “Overrides” tab, we can see those local overrides, sorted by URL folders.
Chrome DevTools overrides tab showing saved local changes
  1. (BONUS!) To see the diff between your source code and the local overrides, you can type “Show changes” on the command menu.

Chrome DevTools showing diff between source and overrides Chrome DevTools command menu with 'show changes' option

WDYT about this post? I read you here:

Get notified of new blog posts?

RSS FeedGet an Email

RSS is the correct choice, btw.