Chrome 新功能 — CSS Overview 尝鲜

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

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

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

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

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

  • 点击打开 Experiment 部分

  • 启用 CSS Overview

Chrome 新功能 — CSS Overview 尝鲜_第1张图片

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

Chrome 新功能 — CSS Overview 尝鲜_第2张图片

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

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

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

在看转发就是最作者最大的鼓励!❤️

你可能感兴趣的:(css,html,web,python,javascript)