Remove all diagnostic styles created in chrome devtools during development

Question

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?

Answer 1

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.

Answer 2

Settings -> More tools -> Changes

Now you can see all previous changes

And allow using Revert all changes button in left down corner

Answer 3

Not the best solution, but it seems it worked for me :

• when debugger opened
• open debugger settings Customize and Control Dev tools (the three dots menu)
• go in settings
• reset settings using "Restore defaults and reload"

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.