Chrome - CSS Overview

1. CSS Overview 介绍

在 chrome 的管理面板中，开启 CSS Overview 面板后，就可以查看当前网站的样式信息，包括：颜色信息、字体信息、媒体查询等，对于开发页面来说，非常好用。用来看看别人的优秀的网站样式信息，也很方便！下面是 CSS Overview 面板显示的网页样式信息截图：

2. 启用 CSS Overview 面板

CSS Overview 现在还是一个实验属性，默认是不开启的。要使用它，需要手动启动它！下面就是启用它的步骤：

1. 点击控制工作面板右上角的设置图标按钮, 进入管理工具设置面板：

下图是设置面板：

2. 点击实验属性菜单 Experiments，选中 CSS Overiew：

3. 重启浏览器以后，设置才能生效，如果不想丢失现在打开的页面，可以在浏览器地址栏输入 chrome://restart，回车后，就能重启浏览器且不丢失当前页面啦！

4. 重启过后，就能在控制台看到 CSS Overview 面板选项 了。

点击 Capture overview 按钮 就可以查看分析出来的样式信息啦！