I find myself tweaking the CSS of various elements using dev tools.
After making multiple changes, I often lose track of where I have applied new styles to the elements.
Is there a way to easily compare the current styles with the original styles on the page?
For instance,
<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, in the above HTML snippet, I have made numerous changes to each element and now I want to apply all those modified values. However, with so many alterations, it becomes challenging to track the differences from the original CSS.
p.s.
I am working with React and webpack, therefore, More tools > Changes is not an ideal solution for me.