浏览器控制台Network面板简述

article/2025/9/28 17:55:14

浏览器控制台Network面板简述

- 如何打开NetWork面板
- 控制台Network的作用
- 面板组成
- 请求列表
- - - 请求列表每列：
    - 查看单个资源的详细信息
    - 查看HTTP头信息
    - - General部分：
      - Response Headers（响应头）部分:
      - Request Headers （请求头）部分：

如何打开NetWork面板

打开控制台方法：

在所在浏览的网页上，鼠标右键—>检查，或者直接按下F12键。如果F12这时去调节亮度了，那么就尝试按键盘上Fn+F12同时，这个时候就可以打开控制台了。再切换到第4个目录就可以看到Network。

打开Network面板方法：

在chrome菜单中选择更多工具 > 开发者工具；
在页面元素上右键点击 > 检查；
使用快捷键 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文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看；
概要（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方法，和响应状态代码。另外，它列出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 （保持长链接/重新建立一个请求）

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

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）

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：通常就是用户的浏览器相关信息

参考文章：
[1]: http://shouce.jb51.net/chrome/ping-gu-wang-luo-xing-neng/ping-gu-zi-yuan-jia-zai-shi-jian.html
[2]: https://blog.csdn.net/weixin_43453386/article/details/83792682
[3]: https://blog.csdn.net/qq_41807489/article/details/104372202