推荐一个Chrome DevTools实用小插件:CSS Overview Panel


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家推荐一个实用Chrome DevTools小插件:CSS Overview Panel(CSS概览面板),使用它重构和改善样式表。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

CSS概览面板(CSS Overview Panel)提供了关于你的CSS的有趣信息。你可以查看高级别的CSS指标,这些指标在重构时特别有用。

如何使用此功能

启用此功能:

  • 从“DevTools实验(Experiments pane)”窗格中启用CSS Overview(Cmd + Shift + P>Show Experiments)

  • 从“DevTools”Command Menu中选择“Show CSS Overview”(Cmd + Shift + P)

在CSS Overview面板中,您可以导航到不同的部分:

  • 概述摘要(Overview Summary)-CSS上有趣的指标,例如元素数量,样式表,类vs ID选择器,复杂选择器等等。
  • 颜色(Colors)-可视化预览背景色、文字色、填充色和边框色。颜色本身是可以点击的,所以你可以准确地查看哪些元素使用了这些颜色。
  • 字体信息(Font info) -衡量字体的使用情况以及它们在样式表中出现的频率。包括字体重量和行高指标。可以选择字体指标来显示受影响的元素。
  • 未使用的声明(Unused declarations)-未使用的CSS声明,可以照常单击。
  • 媒体查询(Media queries)-CSS媒体查询的细节(如最小/最大宽度值)以及它们在样式表中出现的频率。你可以点击这些来直接跳到源面板。如果你启用了源映射,你将能够看到原始样式,例如Sass。

1.png

何时使用此功能

重构你的代码,或规范各页面的品牌风格时,请使用此功能。例如,如果你注意到一种『颜色』的轻微变化散布在你的CSS中,概览面板中的这个颜色面板(Colors pane)是识别这种东西的好地方。

您还可以使用CSS概览面板中的媒体查询面板来检查您是否针对预期的媒体查询断点集,并确保您的页面在各种屏幕尺寸上看起来都很好。

未使用的声明面板可能会通过告知您可以删除哪些CSS来帮助改善网络和渲染性能

最后,你可以使用CSS概览面板向你的前端团队的其他成员,特别是新入职者传达CSS代码的状态信息,包括可能需要重点关注的领域。

CSS概览面板可以提供关于CSS的有价值的指标,而Lighthouse面板则提供整个网站的指标,包括JavaScript。

更多计算机编程相关知识,请访问:编程入门!!

以上就是推荐一个Chrome DevTools实用小插件:CSS Overview Panel的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css怎么设置文本框大小

css因mime类型不匹配而被忽略怎么办

css实现落叶动画效果

js常用正则表达式总汇

css左浮动怎么写?

一分钟带你了解css兼容ie的写法

css属性为什么要加前缀

id在css中怎么表示什么

css技巧:怎么给图片添加蒙版(分享)

css font-family属性怎么用

更多相关阅读请进入《Chrome》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...