How to check my css changes in chrome devtools

Question

I change CSS in dev tools for several elements.

because of many changing, I forgot where I apply new value to elements.

Is there any function to check the difference from the original page?

example,,

<div class='one'> hello </div>
<div class='two'> hello </div>
<div class='three'> hello </div>
<div class='four'> hello </div>
<div class='five'> hello </div>
<div class='six'> hello </div>
<div class='seven'> hello </div>
<div class='eight'> hello </div>

For example, above HTML, I change many times for each element, and now I want to apply all changed values but due to too many changes, I lose my way to check the difference with my original CSS.

p.s. I use React and webpack, so More tools > Changes is not proper way to me

question from:https://stackoverflow.com/questions/65879123/how-to-check-my-css-changes-in-chrome-devtools

Answer 1

You can go to Sources > YourCSSFile > Local Modifications...

Here you can see all changes you made in the chosen CSS file.

Also good to know: The "Local Modifications..." link only appears, if really changes were made to the chosen file.