Chrome开发者工具：利用网络面板做性能分析

（一）浏览器开发者工具面板功能

1. 网络面板

网络面板由控制器、过滤器、抓图信息、时间线、详细列表和下载信息概要这 6 个区域构成（如下图所示）。

（1）控制器

其中，控制器有 4 个比较重要的功能

1. 红色圆点的按钮，表示“开始 / 暂停抓包”

2.“全局搜索”按钮，可以在所有下载资源中搜索相关内容，还可以快速定位到某几个你想要的文件上。

3. Disable cache，即“禁止从 Cache 中加载资源”的功能，它在调试 Web 应用的时候非常有用，因为开启了 Cache 会影响到网络性能测试的结果。清除缓存加载

4. Online 按钮，是“模拟 2G/3G”功能，它可以限制带宽，模拟弱网情况下页面的展现情况，然后你就可以根据实际展示情况来动态调整策略，以便让 Web 应用更加适用于这些弱网。

search 功能：