How to get a summary of your CSS changes in Chrome dev tools?

Question

Is there a way to get a list of the custom CSS changes you applied within the Chrome dev tools?

When you're playing with CSS in the Chrome dev tools to get your web page look right, it would come in handy to easily track the changes you made.

I know about workspaces, but the use case is an Angular 5 app where your CSS is bundled and possibly minified.

To clarify:

• I have a page that is looking pretty far from what it should look like
• I do 20 CSS fixes in dev tools until it looks good
• now I want to get a (CSS) delta from the original page so I have a list of changes I should now implement in the real CSS styles.

Answer 1

You can see all changes via the Changes Drawer

In Dev Tools, you can locate the Changes Drawer via either:

• A) Open Command Palette (Ctrl + Shift + P) and type "changes"

  
  
  

• B) Open Drawer (Esc), click on the more options menu (triple dot), and select Changes

  

Further Reading

• How to get a summary of your CSS changes in Chrome dev tools?
• Export CSS changes from inspector (webkit, firebug, etc)

Updates

• Dev Tools 98 added More precise changes to automatically pretty prints changes
• Issue #1296143 opened User-Select: none in Changes drawer makes it very hard to utilize

Answer 2

I know it's "another" subject, but you can try to launch it in some live checker extension in VS Code in order to follow everything...

Answer 3

Actually you could do exactly what you want:

Go to Sources > > Local Modifications

Going to the Sources tab, choosing your desired CSS file, and then right click and choose Local modifications will give you a diff style summary of your local changes.

Or - you could just save the changes directly to a local CSS file by mapping that local file so that chrome dev tools will automatically save any change that you made to this CSS file.

Answer 4

Well, I learned something new 😯

How to monitor changes to inline styles in console

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

references: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

const targetNode = document

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
            console.log({
              mutation, 
              inline: mutation.target.style[0], 
              style: mutation.target.style[mutation.target.style[0]]
            })


        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

This does not solve the problem

but could be used as a starting point for a custom solution to the problem.

custom diffing of each element replacing old values with the latest values you could end up with a diff of all changes up to this point using your own maintained list.

This could be a pr to each of the browsers or created as a chrome extension. Goodluck, wanted to present a possible solution instead of saying it was impossible.

Answer 5

That depends on how you apply css fixes.

• If you apply css code inline,you can't get a file with list of fixes you made.

• If you made your changes in inspector-stylesheet you can find that file with all your fixes

  Go to Source tab > from the left list open localhost > you can see file called inspector-stylesheet.

  Which will show all your fixes.

  

  

Another way to pick your css fixes from 'Elements' tab in dev tool you can easy copy edits you made and paste it in your css file of your project or you can edit source file itself from 'Source' tab in dev tool you have two things to do to keep what changes you made:

1. By pressing Ctrl + S or Cmd + S to save changes and automatically will save changes in your root css file in your project files.

2. You can copy and paste changes from dev tool to your css file in your code editor