首页 文章

如何在chrome中查看页面的CSS，而不是一行

提问于
浏览 次
5

如何以更漂亮的格式查看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 {显示：块;填充右：8像素} :: - MOZ-聚焦内{边界：0;填充：0} {输入余量：0}输入[类型= “搜索”] :: - WebKit的阻铁

它们只是一线呈现！我怎么能把它作为多行

.input_tiny{
    width:50px
 }
 .input_samll{
     width:100px
 }
 ......
css google-chrome

3 回答

  • 9

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

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

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

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

    除了MTAdmin的回答可能只是你想要美化css .

    回复于
  • 5

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

    现在可以在chrome stable中使用 . 你需要点击带花括号的按钮来美化CSS（就像你做JS一样）

    chrome devtools

    回复于
  • 4

    您可以复制并粘贴到代码美化器中 . 我不喜欢，但有一对包括：

    http://www.codebeautifier.com/

    http://procssor.com/

    只是Google for css beautifiers / prettifiers .

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

    回复于

相关问题