Chrome 新功能—CSS Overview 尝鲜

发布时间：2025-06-04 05:54:53

24 阅读

0 评论

文章标签： html选项

作者：ConardLi

转发链接：
https://mp.weixin.qq.com/s/PoPlgNpPPKOutm136UTjlQ

前言

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

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

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

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

然后转到 DevTool 设置（在Mac上 ?或Function+F1 ，在Windows上 ?或F1）

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

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

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

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