Chrome 新功能 — CSS Overview 尝鲜

时间:2022-07-22
本文章向大家介绍Chrome 新功能 — CSS Overview 尝鲜,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

Chrome 又带来了一个新的非常实用的实验功能!

现在,我们可以大致了解 CSS 在网站上的使用情况,包括网站使用了多少颜色、未使用声明的数量甚至到定义媒体查询的总数。

当然,它还只是一个实验性功能,仍然在探索中,你想要体验的话必须要启用它才能在 DevTools 中开始使用它。

打开 DevTools(在Mac上按Command+Option+I; 在Windows上按Control+Shift+I)。

然后转到 DevTool 设置( 在Mac上 ?或Function+F1 ,在Windows上 ?或F1

  • 点击打开 Experiment 部分
  • 启用 CSS Overview

关闭设置后,我们会在 DevTools 菜单栏中获得一个新的 CSS Overview 选项卡。

注意,该报告分为多个部分,包括颜色,字体信息,未使用的声明和媒体查询。我们可以在唾手可得的少量空间中获得大量信息。

这是一个非常棒的功能,对吧?我非常喜欢这样的功能。想想这不仅能帮助我们作为前端更好的开发,还能帮助我们与设计师合作。比如设计师可以打开这个功能,检查我们的工作,以确保从调色板到字体堆栈的所有内容都井井有条。

了解更多:https://css-tricks.com/new-in-chrome-css-overview/