Chrome的新功能：CSS Overview

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

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

• 打开DevTools（在mac上为Command + Option + I；在windows上为Control + Shift + I）
• 转到DevTool Settings（在Mac上为？或Function + F1；在Windows上为？或F1）
• 点击打开Experiments（实验）部分
• 启用CSS Overview （CSS概述选项）

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

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

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

本文首发于公众号《前端全栈开发者》ID：by-zhangbing-dev，第一时间阅读最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省不少钱！