0

When I make CSS changes with the Chrome DevTools-Elements-Inspector the Changes are saved automatically to disk (thanks to workspaces).

But there is a problem with this: DevTools removes Tabs and Line breaks when saving to Disk.

It seems Chrome DevTools is minifying my CSS changes.

Is this a new Chrome Feature? Can this be turned off?

I want linebreakes and spaces to be preserved in the CSS file.

enter image description here

Edit: I have now found out that the Minifying does not happen with Chrome version 99. The problem described above occurs with version 101. Unfortunately I still haven't found a way to turn off the Minifying (unless I install an older Chrome version). I can't find a checkbox to disable it.

1 Answer 1

0

That's the minify checkbox:

It's off by default, and is used for saving your CSS file in a minified format. It can be turned off to save your file with line breaks, tabs, and whitespace. It doesn't do that by default because that usually results in a larger file, which means more data transferred and processed, and takes more time to parse. Minifying, which removes all unnecessary whitespace, typically results in a much smaller CSS file, which is generally a Good Thing. You should generally leave it off unless you have a specific reason to save your CSS with the whitespace. More info: https://developers.google.com/web/tools/chrome-devtools/devtools/element-inspector#save:

If you want to save whitespace in your styles, uncheck Minify in the file dialog that appears. The changes are automatically saved to your stylesheet.

1
  • Thank you for your help. Unfortunately your link doesn't work. Where can I find this checkbox to deactivate the Minifing? In the DevTools-Settings?
    – georg p.
    May 5, 2022 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.