10

I would really love to see all my live css changes summarized somewhere in Chrome browser, there are a couple of question about this at SO, but nothing works for me. Especially this particular answers which seems to be the most straightforward way to achieve what I need.

Export CSS changes from inspector (webkit, firebug, etc)

I've changed a few css properties, but don't see anything in this tab:

Example Screenshot

FYI - I'm using webpack dev server to serve this page if that's relevant

KyleMit
  • 30,350
  • 66
  • 462
  • 664
scythargon
  • 3,363
  • 3
  • 32
  • 62

2 Answers2

2

Here is how I make my changes appear:

Once you select the element to modify click the + sign under the styles tab.

The new inspector style sheet appears under the changes tab in the left hand column. The right hand pane includes your new changes.

enter image description here

John Grant
  • 522
  • 8
  • 17
  • 1
    So it doesn't automatically track and collect which changes have already been made? That's... an odd choice. – Aron Jun 10 '22 at 18:48
  • 1
    @Aron Apparently the Changes tab only works for styles that live in a CSS file. When using Webpack, by default the styles are injected as inline `style` tags, and changes to those don't appear in the Changes tab. So that's why this is necessary. – yts Sep 16 '22 at 13:02
  • Lame. It seems you have to make these changes via that "New Style Rule" icon, so they end up in the inspector-stylesheet. Changes made directly to displayed rules or element.style don't show up. Again, lame, but I can adjust. Lamer still, is that they're doc doesn't specify this. That said, it's anything but lame that we can, at least, propose changes. Which I've just done here: https://developer.chrome.com/docs/devtools/changes/ – George Marian Mar 10 '23 at 23:36
0

If you made css changes in the Inspect > Elements pane, and didn't happen to use the method of https://stackoverflow.com/a/69634283/6200445 , then one way to see the changes is to do a git compare of the DOM structures. Its not a perfect solution, but you can compare the dom structures (via edit HTML on ) in two commits, comparing some baseline (commit) with your live css changes (second commit)

In my case the git compare had a few irrelevant changes but it caught all my css changes.

Peter Noges
  • 275
  • 2
  • 20