7

如何以更漂亮的格式查看 chrome 中的 css。目前我看到的是这样的：

input_tiny{width:50px}.input_small{width:100px}.input_medium{width:150px}.input_large{width:200px}.input_xlarge{width:250px}.input_xxlarge{width:300px}.input_full{width:100%}。 input_full_wrap{display:block;padding-right:8px}::-moz-focus-inner{border:0;padding:0}input{margin:0}input[type="search"]::-webkit-sear

他们只是在一条线上呈现！我怎样才能使它成为多行

.input_tiny{
    width:50px
 }
 .input_samll{
     width:100px
 }
 ......
4

3 回答 3

12

Chromium 票证已更新为固定 https://code.google.com/p/chromium/issues/detail?id=163123

现在可以在 chrome stable 中使用。您需要单击带有花括号的按钮来美化 CSS（与您做 JS 的方式相同）

铬开发工具

于 2013-10-02T16:41:05.113 回答
5

您可以复制并粘贴到代码美化器中。我没有最喜欢的，但有几个包括：

http://www.codebeautifier.com/

http://procssor.com/

只是谷歌的 CSS 美化器/美化器。

仅供参考...您也可以对 Javascript 使用类似的工具。

于 2013-05-24T23:52:50.397 回答
4

所以有两件事你应该知道。您可以使用打开 chrome 检查器

Windows 上的 Ctrl + Shift + J 或 Mac 上的 ⌥ + ⌘ + J。然后点击左下角的小放大镜。现在您可以将鼠标悬停在页面元素上并单击一个。您将在右侧看到所有适用的 css，甚至可以进行更改和添加新规则。

您应该知道的另一件事是为什么大多数页面在一行中提供它们的 css。如果与站点一起提供的 css 包含许多空格，则需要传输更多信息，并且加载页面需要更长的时间。所以每个人都会做你所看到的，这就是所谓的缩小。

如果您只想要所有的 css，您还可以查看链接的文件。根据页面的不同，CSS 要么与 html 一起位于标签中，要么位于文件中。您可以通过查看源代码并找到它们的链接来下载 css 文件（或通过 chrome 开发人员工具）

除此之外，MTAdmin 的答案可能是您想要美化 css 的内容。

于 2013-05-25T00:02:38.980 回答