运维开发网

Chrome的新功能:CSS Overview,了解网站上使用CSS的概况

运维开发网 https://www.qedev.com 2021-01-13 09:08 出处:51CTO 作者:mb5ff982de32716
这是Chrome浏览器中的一个新的实验性功能!现在,我们可以了解一个网站上使用的CSS的概况,从颜色的数量到未使用的声明数量......甚至是定义的媒体查询的总数。同样,这是一个实验性的功能。这不仅意味着它仍在进行中,而且意味着你必须启用它才能在DevTools中开始使用它。打开DevTools(在Mac上为Command + Option + I;在Windows上为Control + Shif

这是Chrome浏览器中的一个新的实验性功能!现在,我们可以了解一个网站上使用的CSS的概况,从颜色的数量到未使用的声明数量......甚至是定义的媒体查询的总数。

同样,这是一个实验性的功能。这不仅意味着它仍在进行中,而且意味着你必须启用它才能在DevTools中开始使用它。

  • 打开DevTools(在Mac上为Command + Option + I;在Windows上为Control + Shift + I
  • 转到DevTool Settings(在Mac上为Function + F1;在Windows上为F1
  • 点击打开Experiments(实验)部分
  • 启用CSS Overview (CSS概述选项)

Chrome的新功能:CSS Overview,了解网站上使用CSS的概况

当设置关闭时,我们在DevTools菜单托盘中得到一个新的 “CSS Overview” 标签。如果你没有看到它,请确保它没有隐藏在溢出菜单中。

Chrome的新功能:CSS Overview,了解网站上使用CSS的概况

注意,报告被分成许多部分,包括颜色、字体信息、未使用的声明和媒体查询。这是在我们的指尖就能获得的少量空间中的大量信息。

这很漂亮,对吧?我喜欢这样的工具开始进入浏览器。想想这不仅能帮助我们作为前端,还能帮助我们与设计师合作。比如,设计师可以打开这扇门,开始检查我们的工作,以确保从调色板到字体堆栈的所有东西都井井有条。

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号