测试，你真的会玩Chrome么？（二）--网络面板

测试，你真的会玩Chrome么？（一）--设备模式
  network：从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化；Network面板可以监控网站发出的所有请求，并将响应主体、响应头以及请求参数、请求头记录在每个请求中。通过请求类型或者域名可以过滤请求。Network是查看失败请求信息的首要位置。失败的请求会被标注为红色，并带有HTTP状态码。如果是POST请求，可以看到请求的表单数据。

目录

1、网络面板基础
2、控制器
3、过滤器
4、概览
5、请求列表

1、网络面板基础

如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。
控制器：控制面板的外观与功能
过滤器：过滤请求列表中显示的资源
按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。
概览：显示HTTP请求、响应的时间轴。
请求列表：默认时间排序，可选择显示列。
概要：请求总数、总数据量、总花费时间等。

image.png

2、控制器

图1.png

图1:是否开启network的日志功能，如果灰色的，就代表未开启，红色的代表已开启；

图2.png

图2:代表清除network日志

图3.png
图3:代表是否开启过滤选项
图4.png
图4:
图5.png

图5:是网络日志记录,如果勾上,页面刷新后,日志也不会消失(这功能很有用,比如页面跳转后,你想看页面跳转前发出的请求有哪些,比如查看别人网站登录请求,登录成功返回什么,登录成功后又发起了些什么请求,重定向到什么地址)

图6.png
图6:缓存开关，勾选后，禁用缓存，每次从服务器重新加载，可以获得最新的页面；
图7.png
图7:这列表是网速阀值，可以设置上传下载最大网速等。一般可以让网页在不同网络状态下显示；
图8.png
图8:设置按钮，点击后显示详细相关信息；
图9.png
图9:选中图中标红处，可以看到请求表格的每一行都增高了，显示的信息也更多了。
图10.png
图10:显示/隐藏 overview，开始看到这个图觉得头晕，感觉上是显示加载情况的，但又说不出具体什么意思，所以具体研究了下，下面详细讲解下：

• 刻度：代表时间
• 一条条水平线：一条水平线代表一项资源，这条水平线上的不同的颜色代表这项资源在加载过程中处于什么阶段；
• 有两条竖线：前面一条是蓝色，代表DOMContentLoaded 事件被触发；后面一条是红色，代表load事件被触发。从概览面板也能看到这两个信息（如图11）
• DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。

• load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

  
  图11.png

• 从垂直方向看，有些五彩斑斓的水平线有的重叠有的没有重叠，具有重叠部分说明这些资源是在同一时间被加载的。

  
  图12.png
• 如图（图12），被勾选后，代表开启截屏模式，即截取网页在加载过程中的瞬间，这些瞬间显示了网页在什么时间加载出了哪些部分。在控制面板下面出现了一块新的面板，用来显示网页加载过程中的截屏。当鼠标悬浮在一张截图上时，下面的请求表格面板上出现了这张截图加载时的时间；点击一张截图时，请求表格面板也会显示相应时间内加载的资源及其信息；双击一张截图，可以查看这张截图的大图，可通过左右键进行切换。

过滤器

图13.png

-（如图12）Filters控制 request Table 具体显示哪些内容

• 可以进行模糊搜索(只搜索url
  地址),如果首尾加上/,则表示使用正则匹配(同时搜索 URL 地址和返回内容)旧版本 chrome 可能会在过滤输入框右边有个 regexp 选项,勾选了正则才会生效
• 筛选框可以实现很多定制化的筛选，比如字符串匹配，关键词筛选等，其中关键词筛选主要有如下几种：
  domain：筛选出指定域名的请求，不仅支持自动补全，还支持*匹配。
  has-response-header：筛选出包含指定响应头的请求。
  is：通过is:running找出WebSocket请求。
  larger-than：筛选出请求大于指定字节大小的请求，其中1000表示1k。
  method：筛选出指定HTTP方法的请求，比如GET请求、POST请求等。
  mime-type：筛选出指定文件类型的请求。
  mixed-content：筛选出混合内容的请求（不懂啥意思）。
  scheme：筛选出指定协议的请求，比如scheme:http、scheme:https。
  set-cookie-domain：筛选出指定cookie域名属性的包含Set-Cookie的请求。
  set-cookie-name：筛选出指定cookie名称属性的包含Set-Cookie的请求。
  set-cookie-value：筛选出指定cookie值属性的包含Set-Cookie的请求。
  status-code：筛选出指定HTTP状态码的请求。
  图13.png
  （如图13）可根据类别过滤request table显示的记录，如果想同时进行多维度的筛选，按住command/ctrl键可以同时选择多个筛选条件。

概览

图14.png

• 按时间显示各个请求加载的开始时间,结束时间,可以在overview 中选择时间区域,request table 中只显示该时间区域中加载的请求（如图15）

  
  图15.png

请求列表

图16.png
（如图16）点击标红栏里的字段，可进行升序或者降序排序；
name表示资源名称,点击名称可以查看资源的详细情况
status http请求状态码
type 请求只有的 mime 类型
mime类型介绍详见：https://blog.csdn.net/qq_42269433/article/details/87833165
initiator 标记请求是由哪个对象或进程发起的(请求源)

• parser: 请求由 chrome 的 HTML 解析器发起
• redirect: 请求是由 http 页面发起的重定向
• script: 请求是由 script 脚本发起的
• other: 请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入 URL 地址
  size 从服务器下载的文件和请求的资源大小,如果是从缓存获取的资源,该列会显示from cache；
  time 请求或下载的时间,从发起 request 到获取 response 所用的总时间
  timeline 显示所有网络请求的可视化瀑布流(时间状态轴)可以查看该请求的详细信息；
  点击timeline表头,可以对 timeline 进行排序，主要有如下几个维度：
• Timline - Start Time：按请求的发起时间排序。
• Timline - Response Time：按请求的响应时间排序。
• Timline - End Time：按请求的结束时间排序。
• Timline - Total Duration：按请求的总耗时排序，可以快捷的找出耗时最多的资源。
• Timline - Latency：按请求的延迟排序，延迟是指请求发起的时间到响应开始的时间，可以快捷的找出请求等待时间最长（TTFB）的资源。