浏览器控制台Network面板介绍

quanshiyinian

如何打开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面板组成

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

复制代码

请求列表：

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

复制代码

常见的四个标签页


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

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

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

复制代码

Response Headers（响应头）部分

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

复制代码

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

复制代码

Request Headers （请求头）部分

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

复制代码

这样就可以了

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！