Chrome开发者工具：检查美化CSS

Question

如果你想查看其他人网站的CSS（窃取向他们学习），Firebug可以让你检查美化的CSS：

但是在Chrome 16中，您只能获得缩小的CSS：

有没有办法让Chrome来美化CSS？

Answer 1

在较新的版本中，有一个“格式”按钮可以美化源：

（只是刚刚意识到自己：P）

Answer 2

开发人员的控制台将文件显示为已提供。如果您需要人类可读的版本，请将代码复制粘贴到http://www.codebeautifier.com/。

如果使用“元素”选项卡，则每个元素也会显示应用的CSS属性。

Answer 3

我推荐Quick Source Viewer，它是chrome的扩展，不需要人工复制粘贴（行为类似于额外的Chrome开发工具）。 它可以显示当前页面的格式和颜色编码的来源。

它非常强大，显示页面的所有“来源”，无论是css，js还是html。甚至可以单独查看内联css / js等内容（突出显示注入的代码）。而最好的部分是它美化所有这些，甚至是css（chrome的开发工具仍然拒绝这样做）。

Answer 4

您可能需要查看漂亮的打印：https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en

安装完成后，当您查看缩小的CSS或JS文件时，它会在片刻之后显示为未缩小。