Menu
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:
603
Click on the three vertical dots located on the top-right of Chrome dev tools. Select "More Tools" from the drop-down menu. You'll discover a variety of options when you click "More Tools." From the various options, select the CSS overview feature.
To make things simpler, Chrome only shows you the local resources (so you don't get confused on as to whether you are editing the local or the network resource). To save your changes, press CTRL + S when editing the file.
Now, every time you edit the source code you can click “Command + S” and save your code changes. Also, if you edit your CSS in your regular editor and you save the file, the changes will update in your Chrome without refreshing the page.
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
91
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
