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

来源:https://css-tricks.com
作者:Robin Rendle

这是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的概况

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

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


推荐阅读

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

原文出处:微信公众号【 Dunizb翻译 前端全栈开发者】

原文链接:https://mp.weixin.qq.com/s/LHKg4X9znqjyJBae8Ad4Xg

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论