一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

一、Network面板

• 打开Network面板快捷键：ctrl+shift+I(windows)或Command+Option+I(Mac)
• Network面板从上至下分为五大块，内容结构如下图：

（一）控制器

• 控制面板的外观与功能
• 控制器部分的详细功能如下图：

（二）过滤器

• 专门过滤我们请求列表中显示的资源
• 可以通过command(Mac) 或者ctrl(Window/Linux)键,然后点击过滤器可以同时选择多个过滤器

1、按类型过滤的过滤器

• 包含的类型有：XHR、JS、CSS、Img、Media、Font、Doc、WS(WebSocket)、Manifes或者Other（此处未列出任何其他类型）
• 多类型：按住command(Mac) 或者ctrl(Window/Linux)键
• 按时间过滤：通过概览面板，拖动滚动条
• 隐藏Data URLs：CSS图片等小文件以BASE64格式嵌入HTML中，以减少HTTP请求数

2、属性过滤

多属性间通过空格实现AND操作

（三）概览

• 显示HTTP请求和响应的时间轴，用图形化的方式，以时间线不同的颜色来显示我们请求的相关信息

（四）请求列表

• 每一个请求都会在这里显示，当我们点击请求时，还可以看到请求的详细内容，默认是以时间排序的，可以选择显示的列
• 它可以按时间、按列以及按活动时间排序

• 请求列表中的字段属性如下：

• Preview预览请求内容：

• Timing请求时间详细分布：

（五）概要

• 这部分包含请求总数、总数据量、总花费时间等
• 比如第一个图中有59个请求；一共传输了2.4兆的数据；总共使用了43秒；DOM内容加载共消耗了4.59秒;总共载入花费了10.11秒