admin管理员组文章数量:1649936
浏览器控制台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/chrome/ping-gu-wang-luo-xing-neng/ping-gu-zi-yuan-jia-zai-shi-jian.html
[2]: https://blog.csdn/weixin_43453386/article/details/83792682
[3]: https://blog.csdn/qq_41807489/article/details/104372202
版权声明:本文标题:浏览器控制台Network面板简述 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729512838a1204208.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论