Chrome浏览器的Network面板介绍

测试工程师除了需要掌握软件测试的基本理论、测试工具的使用、编程语言、计算机网络知识、数据库…这些最基础的理论知识之外，我觉得还需要熟悉Chrome的network面板，挺重要的，这是我实习后的一个感受，因为测试的时候经常性要打开Chrome的network面板查看接口的调用和参数等。恰巧偶然看到某位大神的针对Chrome浏览器Network面板的相关介绍，遂与大家分享~

以下是摘抄自薛勤大神的博文Chrome教程之NetWork面板分析网络请求，并整合了自己的一些知识和实习时所了解的。有不对的地方烦请各位大神批评指正~

了解Network面板的重要性

为啥测试需要了解network面板的组成部分的重要性

1. 更好的帮助开发定位问题，也能从中知道bug的原因所在–是前端映射错误的bug还是后端传数据的bug？
2. 可以更好帮助自己组织语言，准确报告缺陷。

如何打开

无论是Windows还是Mac，都可以使用快捷键（FN)+F12键打开Chrome的Network面板。也可右键–>检查，打开。

面板组成

如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。

• 控制器：控制面板的外观与功能
• 过滤器：过滤请求列表中显示的资源,按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。
• 概览：显示HTTP请求、响应的时间轴。
• 概要：请求总数、总数据量、总花费时间等。
• 请求列表：默认时间排序，可选择显示列。可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

请求列表

所有的资源

如果选择All，会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息。

请求的相关信息

打开一个Ajax异步请求，可以看到它的请求头信息，是POST请求还是GET请求、参数有哪些、还可以预览它的返回的结果数据，这些数据的使用和查看有利于前端和后端工程师们联调数据，也方便前端直观的分析数据，同时，测试工程师报bug时可以将这些参数截图发给程序猿，帮助他们快速准确定位到bug原因所在，提高沟通的效率。

简单介绍下每列的含义：

Name：资源的名称

Status：HTTP状态代码

Type：请求的资源的MIME类型

Initiator：发起请求的对象或进程。它可能有以下几种值：

• Parser（解析器）：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）
• Redirect（重定向）：HTTP重定向启动了请求
• Script（脚本）：脚本启动了请求

Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址。

Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小

Time：总持续时间，从请求的开始到接受响应中的最后一个字节

Waterfall：各请求相关活动的直观分析图

鼠标右键单击，添加其他列：

还可以自定义header头

7.预览请求内容#

如图所示，在请求列表点击以下

功能包括：

• 查看头部，包括请求头、响应头。

• 查看Cookie

• 预览响应正文：查看图像用

• 查看响应正文

• 时间详细分布

• 导出数据为HAR格式

• 查看未压缩的资源大小：Use Large Request Rows

• 浏览器加载时间（概览、概要、请求列表）DOMContentLoaded 事件的颜色设置为蓝色，而load事件设置为红色

• 将请求数据复制到剪贴板

  • Copy Link Address：将请求的网址复制到剪贴板
  • Copy Response：将响应包体复制到剪贴板
  • Cop as cURL：以 cURL 命令形式复制请求
  • Copy All as cURL：以一系列 cURL 命令形式复制所有请求
  • Copy All as HAR：以 HAR 数据形式复制所有请求

• 查看请求上下游：按住 shift 键悬停请求上，绿色是上游，红色是下游。

控制器

模拟慢速网络


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：浏览器正在读取之前收到的本地数据

Network还有一个好的地方就是这里的设备图标，点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择

Security标签页 可以告诉你这个网站的安全性，查看有效的证书等
Audits标签页 可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告。