最近打算写一写chrome教程文档，不知道大家最感兴趣的是什么内容呢？
1.如何打开
无论是在windows还是mac，都可以使用（fn）+f12键打开chrome的network面板。
2.面板组成
如图所示，chrome的network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。
控制器：控制面板的外观与功能
过滤器：过滤请求列表中显示的资源
- 按住command（mac）或ctrl（window/linux），然后点击过滤器可以同时选择多个过滤器。
概览：显示http请求、响应的时间轴。
请求列表：默认时间排序，可选择显示列。
概要：请求总数、总数据量、总花费时间等。
image-20190522114020527
3.控制器
image-20190523101125138
模拟慢速网络
image-20190523102954487
还可以自定义，点击add…
image-20190523103103402
4.过滤器
如何对请求进行过滤呢？
4.1按字符串
1.键入png到过滤文本框。仅显示包含文本的文件png。在这种情况下，与过滤器匹配的唯一文件是png图像。
image-20190524112336773
2.类型/.*.[cj]s+$/。devtools过滤掉任何资源，其文件名不以a j或c后跟1个或多个s字符结尾。
image-20190524112320315
3.类型-main.css。devtools过滤掉了main.css。如果任何其他文件与模式匹配，它们也将被过滤掉。
image-20190524112259664
4.2按类型
image-20190523102734525
- xhr、js、css、img、media、font、doc、ws（websocket）、manifest或other（此处为列出的任何其他类型）
- 多个类型，按住command（mac）或ctrl（windows、linux）
- 按时间过滤：概览面板，拖动滚动条
- 隐藏data urls：css图片等小文件以 base64 格式嵌入html中，以减少http请求数。
4.3属性过滤
下面演示使用filter过滤器，如图所示：
image-20190523114458965
- domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域
- has-response-header：显示包含指定http响应标头的资源
- is：使用 is:running 可以查找 websocket 资源，is:from-cache 可查找缓存读出的资源
- larget-than：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
- method：显示通过指定 http 方法类型检索的资源
- mime-type：显示指定 mime 类型的资源
- mixed-content：显示所有混合内容资源（mixed-content:all）,或者仅显示当前显示的资源（mixed-content:displayed）
- scheme：显示通过未保护http（scheme:http）或受保护 https（scheme:https）检索的资源。
- set-cookie-domain：显示具有 set-cookie 标头并且 domain 属性与指定值匹配的资源。
- set-cookie-name：显示具有 set-cookie 标头并且名称与指定值匹配的资源。
- set-cookie-value：显示具有 set-cookie 标头并且值与指定值匹配的资源。
- status-code：仅显示 http 状态代码与指定代码匹配的资源。
多属性间通过空格实现 and 操作。
5.请求列表的排序
- 时间排序，默认
- 按列排序
- 按活动时间排序
- start time：发出的第一个请求位于顶部
- response time：开始下载的第一个请求位于顶部
- end time：完成的第一个请求位于顶部
- total duration：连接设置时间和请求/响应时间最短的请求位于顶部
- latency：等待最短响应时间的请求位于顶部
6.请求列表
image-20190523142032553
简单介绍下每列的含义：
name：资源的名称
status：http状态代码
type：请求的资源的mime类型
initiator：发起请求的对象或进程。它可能有以下几种值：
- parser（解析器）：chrome的 html 解析器发起了请求（鼠标悬停显示js脚本）
- redirect（重定向）：http重定向启动了请求
- script（脚本）：脚本启动了请求
- other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址。
size：服务器返回的响应大小（包括头部和包体），可显示解压后大小
time：总持续时间，从请求的开始到接受响应中的最后一个字节
waterfall：各请求相关活动的直观分析图
鼠标右键单击，添加其他列：
image-20190523144119290
还可以自定义header头：
image-20190523144534008
7.预览请求内容
如图所示，在请求列表点击以下
image-20190523145421841
功能包括：
- 查看头部，包括请求头、响应头。
- 查看cookie
- 预览响应正文：查看图像用
- 查看响应正文
- 时间详细分布
- 导出数据为har格式
- 查看未压缩的资源大小：use large request rows
- 浏览器加载时间（概览、概要、请求列表）domcontentloaded 事件的颜色设置为蓝色，而load事件设置为红色
- 将请求数据复制到剪贴板
- copy link address：将请求的网址复制到剪贴板
- copy response：将响应包体复制到剪贴板
- copy as curl：以 curl 命令形式复制请求
- copy all as curl：以一系列 curl 命令形式复制所有请求
- copy all as har：以 har 数据形式复制所有请求
- 查看请求上下游：按住 shift 键悬停请求上，绿色是上游，红色是下游。
下面演示如何查看请求上下游，首先按住 shift 键，其次移动鼠标到不同请求，如图所示：
image-20190523154602391
image-20190523155233126
8.浏览器加载时间
触发流程：
- 解析 html 结构
- 加载外部脚本和样式表文件
- 解析并执行脚本代码 // 部分脚本会阻塞页面的加载
- dom 树构建完成 // domcontentloaded 事件
- 加载图片等外部文件
- 页面加载完毕 // load事件
9.请求时间详细分布
点击请求列表后，找到timing，看到如图所示的字段
image-20190523162127459
queueing：浏览器在以下情况下对请求排队
- 存在更高优先级的请求
- 此源已打开六个 tcp 连接，达到限值，仅适用于 http/1.0 和 http/1.1
- 浏览器正在短暂分配磁盘缓存中的空间
stalled：请求可能会因 queueing 中描述的任何原因而停止
dns lookup：浏览器正在解析请求额ip地址
proxy negotiation：浏览器正在与代理服务器协商请求
request sent：正在发送请求
serviceworker preparation：浏览器正在启动service worker
request to serviceworker：正在将请求发送到service worker
waiting（ttfb）：浏览器正在等待响应的第一个字节。ttfb表示time to first byte（至第一字节的时间）。此时间包括1次往返延迟时间及服务器准备响应所用的时间
content download：浏览器正在接收响应
receiving push：浏览器正在通过 http/2 服务器推送接收此响应的数据
reading push：浏览器正在读取之前收到的本地数据
10.阻止请求
当某些资源不可用时，页面的外观和行为如何？它完全失败了，还是仍然有些功能？阻止要求查找：
1.按control+ shift+ p或 command+ shift+ p（mac）打开命令菜单。
image-20190524112405392
2.键入block，选择“ 显示请求阻止”，然后按enter。
image-20190524112456854
3.单击添加模式。
4.类型main.css。
image-20190524112514524
5.单击添加。
6.重新加载页面。正如预期的那样，页面的样式有点混乱，因为它的主样式表已被阻止。请注意main.css网络日志中的行。红色文本表示资源已被阻止。
image-20190524112542980
main.css已被封锁
7.取消选中启用请求阻止复选框。
