I am using gulp/live reload in my development workflow. When styling an element using CSS I sometimes adjust that element's style rules ( Edit: using event.style {} under the elements panel) directly using Chrome Dev Tools; and then when I have them how I want them I copy them into Sublime Text and save them to the project.
The problem is that those temporary changes that I made continue to block any changes made to the CSS file after I save it so they essentially override Live Reload, meaning that I have to reload the page in the standard way to see the (real) changes made in the css file itself, which hinders the effectiveness of live reload.
I can turn off a style rule on a particular element if I've only altered one, and this works fine, but in the case of more complex elements like menus for instance where the style may involve more than one element, then it's hard to remember which ones have been changed inside devtools to turn them off.
Is there any way to globally disable or remove those local style rules?
I found a lo-fi way of doing this is to just hold ctrl-z down for a few seconds and it seems to undo everything across various panels from what I can see.
Settings -> More tools -> Changes
Now you can see all previous changes
And allow using Revert all changes
button in left down corner
Not the best solution, but it seems it worked for me :
Edit: if like me, you linked Chrome's debbuger with filesystem, ensure your tests rules have not been saved in CSS file on filesystem due to Chrome having right to write in CSS ressource on filesystem.
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