浏览器控制台Network面板介绍

如何打开Network面板

1. 在浏览的网页上，鼠标右键—>检查；
2. 直接按下F12键。（如果F12这时去调节亮度了，那么就尝试按键盘上Fn+F12。目录4即可找到Network）；
3. 在chrome菜单中选择 更多工具 > 开发者工具；
4. 使用快捷键 Ctrl + Shift + I (Windows) ，Cmd +Opt + I (Mac)；

控制台Network的作用

可以使用网络面板Network面板来测量网络性能。Network控制台记录体现整个请求过程。当执行一个请求，idea控制台会打印日志和请求的执行顺序和时间。而Network就是前台负责显示这些网络请求信息的。
Network就可以体现这个请求的整个执行过程，包括评估网站的网络性能、加载静态CSS、JS、HTTP请求与响应标头和Cookie、响应状态码等

Network面板组成

Controls（控制板）。可以控制Network面板的外观和功能；
Filters（过滤器）。可以控制在列表中显示哪些资源。（注：按住Ctrl并点击过滤器可以同时选择多个过滤器）
Overview（概览）。此部分展示了资源检索时间的时间线。如果多条竖线堆叠在一起，则这些资源被同时检索；
Request Table（请求列表）。默认时间排序，可选择显示列。可以看到所有的资源请求，包括图片资源，html,css，js文件，网络请求，等等，可以根据需求在Filter过滤器部分筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确等等
Summary（概要）。上述概要列出了请求总数、传输的数据量和加载总时间等。

请求列表：

Name (名称)：资源名称
Status（状态）：HTTP状态代码
Type（类型）：请求的资源的MIME类型
Initiator（发起人）：发起请求的对象或进程。它可能有以下几种值： Parser（解析器）：Chrome的HTML解析器发起了请求
Redirect（重定向）：HTTP重定向启动了请求 Script（脚本）： 脚本启动了请求
Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面，或在地址栏中输入网址
Size（尺寸）：响应头的大小（通常是几百字节）加上响应数据，由服务器提供。
Time（时间）：总持续时间，从请求的开始到接收响应中的最后一个字节。
Timeline（时间轴）：Timeline列显示所有网络请求的视觉瀑布。点击此列的标题栏会显示其他排序字段的菜单

注：在Request Table （请求列表）的Name（名称）中）可以查看该资源的更多信息。

常见的四个标签页

Hearder（标头）：与资源相关的HTTP头。
Preview（预览）：预览JSON，图片和文字资源。
Response（响应）：HTTP响应数据（如果有）。 Timeing（时序）：资源的请求的生命周期的明细分类。
此外还有Cookies、Initiator等相关信息。

查看HTTP头信息
点击Headers显示该资源详细的头信息。Headers(头信息)标签页显示资源的请求URL，HTTP方法，和响应状态代码。

General部分

Request URL：资源的请求url
Request Method：请求方式 GET /POST Status
Code：HTTP状态码（200，OK）
Remote Address ：请求地址
Referrer Policy:为了控制请求头中的referrer的内容（有多个属性值）

Response Headers（响应头）部分

Connection：连接方式有两种 ：keep-alive/close （保持长链接/重新建立一个请求）
Content-Language: 响应数据的自然语言 （zh-CN）
Content-Type：服务器告诉浏览器它发送的数据属于什么文件类型。（text/html;charset=UTF-8）
Date：响应消息发送的GMT格式日期 （Wed, 01 Sep 2021 05:17:39 GMT）
Server：服务器的名称（nginx/1.15.2）
Set-Cookie：对客户端设置cookie。（token=XXXX; Path=/; HttpOnly）
Transfer-Encoding：响应内容的传输编码格式。（chunked, deflate, gzip）

注：keep-alive就是浏览器和服务器　的通信连接会被持续保存，不会马上关闭，而close就会在response后马上关闭。但这里要注意一点，我们说HTTP是无状态的，跟这个是否keep-alive没有关系，不要认为keep-alive是对HTTP无状态的特性的改进。

Request Headers （请求头）部分

Accept：浏览器（或者其他基于HTTP的客户端程序）可以接收的内容类型（Content-types）
Accept-Encoding：浏览器可以处理的编码方式，注意这里的编码方式有别于字符集，这里的编码方式通常指gzip,deflate等。例如Accept-Encoding: gzip, deflate
Accept-Language:浏览器接收的语言，其实也就是用户在什么语言地区
Connection：告诉服务器这个user agent（通常就是浏览器）想要使用怎样的连接方式。
Cookie:浏览器向服务器发送请求时发送cookie，或者服务器向浏览器附加cookie
Host:服务器的域名或IP地址，如果不是通用端口，还包含该端口号
Referer：指当前请求的URL是在什么地址引用的
Upgrade-Insecure-Requests: 请求头向服务器发送一个信号，表示客户对加密和认证响应的偏好，并且它可以成功处理
User-Agent：通常就是用户的浏览器相关信息