Chrome 新功能：CSS 概览

Chrome 推出了一个很酷的全新实验功能！现在，我们可以概览网站上使用的 CSS，从颜色数量到未使用的声明数量……甚至可以查看已定义媒体查询的总数。

再次强调，这是一个实验性功能。 这不仅意味着它仍在开发中，还意味着您需要启用它才能在开发者工具中开始使用它。

• 打开开发者工具（Mac 上按 Command+Option+I；Windows 上按 Control+Shift+I）
• 转到开发者工具设置（Mac 上按 ? 或 Function+F1；Windows 上按 ? 或 F1）
• 点击打开“实验”部分
• 启用“CSS 概览”选项

然后，哦，看看！关闭设置后，我们在开发者工具菜单栏中获得了一个新的“CSS 概览”选项卡。 如果您没有看到它，请确保它没有隐藏在溢出菜单中。

请注意，报告被分成了几个部分，包括颜色、字体信息、未使用声明和媒体查询。 这些信息非常丰富，却以简洁的方式呈现在我们指尖。

这非常棒，不是吗？ 我喜欢这种工具开始集成到浏览器中的趋势。 想象一下，这对我们前端开发人员以及我们与设计师的协作有何帮助。 例如，设计师可以打开它并开始检查我们的工作，以确保从调色板到字体堆栈的所有内容都完好无损。