### You can see all changes via the [Changes Drawer][4]

[![Changes Drawer][1]][1]


In Dev Tools, you can locate the Changes Drawer via either:

* **A)** Open Command Palette (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>) and type "*changes*"

   [![Command Palette > Changes][2]][2]
   <br/><br/>



* **B)** Open Drawer (<kbd>Esc</kbd>), click on the more options menu (triple dot), and select Changes

   [![Drawer Menu > Changes][3]][3]


### Further Reading

* [How to get a summary of your CSS changes in Chrome dev tools?][5]
* [Export CSS changes from inspector (webkit, firebug, etc)][6]

### Updates

* Dev Tools 98 added [More precise changes][7] to automatically pretty prints changes
* Issue #1296143 opened [User-Select: none in Changes drawer makes it very hard to utilize][8]


[1]: https://i.stack.imgur.com/Qrbn4.png
[2]: https://i.stack.imgur.com/sfvQJ.png
[3]: https://i.stack.imgur.com/ElnQk.png
[4]: https://developer.chrome.com/blog/new-in-devtools-65/#changes
[5]: https://stackoverflow.com/q/50642885/1366033
[6]: https://stackoverflow.com/q/3355111/1366033
[7]: https://developer.chrome.com/blog/new-in-devtools-98/#changes
[8]: https://bugs.chromium.org/p/chromium/issues/detail?id=1296143

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.

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

Answer

You can see all changes via the Changes Drawer

Further Reading

Updates