I kept losing my CSS tweaks in the inspector, so I built something to catch them

Here’s a thing I do probably 20 times a week. I open the inspector on a page I’m building and I start nudging stuff. Bump the padding. Change a color. Try a bigger font size. Drag a border radius around until it feels right.

Twelve little changes later it finally looks how I want. And then comes the part I hate.

I have to remember every single thing I just touched and copy it back into my actual stylesheet. By hand. From memory.

I always miss one. Every time. Then I’m back in the inspector trying to figure out which value was the one that mattered.

(If you’ve ever shipped a CSS change, reloaded the page, and gone “wait, why does it look different now,” hi, it’s me, I’ve done that at 2am more than I’d like to admit.)

So I built a little Chrome extension

I’m calling it CSS Change Exporter. It watches what you edit in the inspector and hands it back to you. Just the stuff you actually changed.

You make your edits live in the DevTools inspector window the way you already do. Then you click a button and it gives you a clean list of only the declarations that changed. It even shows the old value next to the new one, so you can see exactly what you bumped and what it used to be.

A few things it does that I find genuinely useful:

• It only shows the properties you actually touched, not the entire rule block.
• It tells you the old value, so you’ve got a record of what you’re overriding.
• New properties get tagged as new, and anything you delete gets noted too.
• It handles media queries, so your responsive tweaks stay grouped.
• You can copy it straight to your clipboard, or download it as a text file if you’d rather keep it around or need to share with someone else.

It came out of building Freelance Studio, honestly. I spend so much time in the inspector tuning the plugin’s UI that the copy-it-back-by-hand step was driving me up a wall. So I fixed it.

How to install it

It’s not in the Chrome Web Store. It’s a developer tool you load straight into Chrome, which takes about a minute.

1. Download the zip from the link at the bottom and unzip it.
2. Go to chrome://extensions in your address bar.
3. Flip on Developer mode (the toggle is in the top right).
4. Click Load unpacked and pick the unzipped folder.

That’s it. You’ll see it show up in your extensions list.

How to use it

1. Open the page you’re working on, then open DevTools. Press F12, or Cmd+Option+I on a Mac, or Ctrl+Shift+I on Windows. Click the CSS Export tab.
2. It grabs a snapshot of the page’s current styles the second the panel opens. You don’t have to do anything for this part.
3. Go make your edits in the Styles pane like you normally would. Colors, spacing, fonts, whatever you’re tuning.
4. Click Show changes to see them right there in the panel, or Export .txt to download a file. There’s a Copy button if you just want to paste it somewhere.
5. Drop it into your real stylesheet and you’re done.

[SCREENSHOT: the panel after clicking Show changes, with a real diff in it from your own site. This is the money shot, so use an example with a few different kinds of changes (a color, a size, maybe a new property).]

One small habit to get into: open the panel first, then start tweaking. The snapshot it compares against is taken when the panel opens, so if you make changes before that, it won’t catch them. If you forget (I do, constantly), just hit Re-capture baseline and redo the edit.

Just so you know:

It only reads CSS that lives on the same site you’re inspecting. Stuff like Google Fonts or CSS loaded from a CDN gets skipped, because the browser blocks extensions from reading those for security reasons. Your own theme or plugin CSS is fully readable though, which is the whole reason I made this.

Also, fair warning: it can’t open DevTools for you. I really wanted the icon to just launch the inspector and jump to the tab, but Chrome doesn’t let extensions do that. The fastest path is F12, and DevTools is nice enough to reopen on whatever tab you used last. So once you click CSS Export the first time, it’ll keep landing there for you.

Want it?

It’s free. Grab it here.

If it breaks, or if there’s something you wish it did, tell me. That’s exactly how Freelance Studio itself keeps getting better, and I’d love to do the same with the little tools built around it.