Chrome DevTools - Network网络篇
一、官网
二、主要用途
- 记录网络活动
- 检查网络请求
- 对网络请求进行过滤和排序
- 搜索网络标头和响应
- 更改加载行为
- 屏蔽网络请求
- 更改网络条件
- 调试
prefetch推测规则 - 替换HTTP响应标头
- 使用通配符替换多个网址的标头
- 保存和到处网络请求数据
三、网络篇
1.网络工具栏
本章分享，网络活动，保留日志，网络状况，网络设置四部分。筛选板块单独分享，保存和到处网络请求数据HAR文件暂未想到场景这里不做介绍了(有使用过的同志欢迎传授知识)
（1）网络活动
当您打开开发者工具时，只要开发者工具已打开，网络请求就会自动记录在 Network 面板中
功能一：红色按钮，代表记录网络活动的状态开关，关闭后新的网络状态不被记录
功能二：清除 Requests 表格中的所用请求 clear
（2）保留日志
开启保留日志后，当次的网络记录被保存刷新后仍存在
使用场景：方便进行多个接口的两次记录对比
（3）网络状况
停用缓存：停用浏览器缓存以模拟初次访问者
网络节流：模拟慢速网络连接
（4）网络设置
1.大请求行：ui层面的视觉变化，方便开发者更清晰地查看请求信息
2.按帧分组：将网络请求按照其所属的 iframe 或 框架（frame） 进行分组显示，使用场景：多个iframe嵌入，这里没有实际的场景就从官网拿下图供大家理解
3.概览：概览其实也属于筛选的一种 - 按时间筛选，后面会在搜索筛选中再提到4.屏幕截图：截取屏幕截图，以分析用户在等待网页加载时看到的内容，根据截图切片与概览时间轴的联动可以清晰的看到这个节点的接口状态和时间
2.搜索和过滤
（1）搜索
场景：在请求标头、载荷(key支持搜索value不可以)和响应内部查找时
（2）过滤
1.输入框过滤
场景一：通过字符串和正则表达式指定资源单一搜索 - 输入框直接输入
场景二：过滤掉单一资源 - 输入框输入然后反转
场景三：过滤掉多个资源 - 通过'-'标记符指定搜索(为了案例明显这里双重取反)
2.类型过滤
3.按时间过滤
与上面网络设置-概览的联动
4.屏蔽网络请求
右键请求，选择屏蔽请求网址
场景：联调阶段有的接口非必要/影响后续操作可以屏蔽掉
3.分析请求
针对单个请求的细致分析
（1）标头
这里响应头的内容是可以被更改的，流程是创建个文件夹来存发修改的请求，后续的请求走文件夹中修改后的 ， 这里我觉得更常用的还是修改接口的响应内容 - 后续会提到
修改方式：两种
2.载荷
即请求的内容，get/post的请求内容，这里可以通过搜索key来定位到
3.预览和响应
总结来讲都是看后台反馈数据的
响应：原始数据视图，适合调试和分析
预览：解析后的友好视图，适合快速查看你内容(json/html...)
4.启动器(好用)
记录请求的调用栈，对问题定位和各种调用层级深的网络请求特别友好
5.时间
- 加入队列 。浏览器会在连接开始之前以及在以下情况下将请求加入队列：
- 还有优先级更高的请求。请求优先级由资源类型以及其在文档中的位置等因素决定。如需了解详情，请参阅
fetchpriority指南的资源优先级部分。- 此来源已有 6 个 TCP 连接处于打开状态，这是上限。（仅适用于 HTTP/1.0 和 HTTP/1.1。）
- 浏览器正在磁盘缓存中暂时分配空间。
- 已暂停 。连接开始后，请求可能会因队列中所述的任何原因而暂停。
- DNS 查询。浏览器正在解析请求的 IP 地址。
- 初始连接。浏览器正在建立连接，包括 TCP 握手或重试以及协商 SSL。
- 代理协商 。浏览器正在与代理服务器协商请求。
- 已发送请求。请求正在发送中。
- ServiceWorker 准备工作。浏览器正在启动服务工件。
- 向 ServiceWorker 发出请求。请求正在发送到服务工件。
- 等待中 (TTFB)。浏览器正在等待响应的第一个字节。TTFB 是"Time To First Byte"（收到第一个字节的时间）的缩写。此时间包括 1 次往返延迟
- 时间和服务器准备响应所需的时间。
- 内容下载 。浏览器会直接从网络或 Service Worker 接收响应。此值是读取响应正文所花费的总时间。大于预期值可能表示网络速度缓慢，或者浏览器正忙于执行其他工作，导致延迟读取响应。
4.右键资源实用功能
（1）标头选项自定义开启
（2）替换内容(好用)
场景：后台定义好协议后，可以通过自己定义内容来直接进行联调，不需要伪代码且流程顺畅
