CODEWITHSUNDEEP
cssgoogle-chrome-devtoolsgulplivereloadgulp-livereload
byronyasgur
byronyasgur

Reputation: 4737

Remove all diagnostic styles created in chrome devtools during development

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?

Upvotes: 24

Views: 18044

Answers (7)

Lucas Pinho da Silva
Lucas Pinho da Silva

Reputation: 11

Go to sources on F12 and go to Overrides on the left menu ( if you can't see the Overrides you will see ">>" ), then disable "Enable Local Overrides".

Upvotes: 1

JohnLBevan
JohnLBevan

Reputation: 24410

Here's the solution I found (Chrome v93.0.4577.82)...

  • Open Chrome Dev Tools (F12)
  • Click on the Sources tab
  • Files you've got local modifications on show up with a purple dot.
  • Right click on one of these modified files and select Copy Link Address
  • This will give a link to your local file system, rather than the original source.
  • Navigate to this file's parent directory in your tool of choice (e.g. Windows Explorer).
  • Delete the file(s) which you wish to remove the overrides for.

Note: For me the parent folder was c:\temp\overrides\{sites_fqdn}\. I couldn't find where this folder's configured (i.e. it's not under any of the chrome://flags or chrome://settings so far as I can see).

Upvotes: 3

Tyler V.
Tyler V.

Reputation: 2561

Changes to the Styles section of the Elements tab can get stuck if you're also using Overrides from the Sources tab. To reset the Styles tab changes, go to Source > Overrides and disable and/or clear your overrides.

Upvotes: 3

Alex Strizhak
Alex Strizhak

Reputation: 990

Settings -> More tools -> Changes

Now you can see all previous changes

And allow using Revert all changes button in left down corner

Upvotes: 20

el-teedee
el-teedee

Reputation: 1341

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.

Upvotes: 5

byronyasgur
byronyasgur

Reputation: 4737

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.

Upvotes: 15

try-catch-finally
try-catch-finally

Reputation: 7624

I don't think that you can disable changing styles since this is what the dev tools are made for.

None of these Chrome dev tools resources state that this is possible:

Even if the dev tools would track the added/changed element styles, they might have changed by scripts inbetween. Resetting/removing would probably screw the application.

But you can remove those modifications you made directly to the loaded styles.

Regarding to your comment you'd indeed like to remove all inline/element styles, since this seems to be not possible, you should consider changing the loaded stylesheets only. Then you're able to revert the changes.

Go to the source view of the .css file an press Ctrl-Z in it:

Screenshot: dev tools: Sources -> File (Press Ctrl-Z to revert the styles)

(Files with modifications are marked with an asterisk)

Alternatively you can show the changes and revert them by button click: right click the .css file, then Local modifications .... The histor is opend. Click on revert

Screenshot: dev tools: Sources -> File -> right click in the source view -> click "Local modifications ..."; in the "History" tab click revert

Upvotes: 1

Related Questions