Web前端最全前端-chromeF12 谷歌开发者工具详解 Network篇，2024年最新蚂蚁金服四面

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

scheme：协议规定。如 HTTPS

set-cookie-name：服务器设置的cookies名称

set-cookie-value：服务器设置的cookies的值

set-cookie-domain：服务器设置的cookies的域

status-code：HTTP响应头的状态码

• 显示详细信息

显示时间流

• 是否保留日志 
  当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来，不会清空的哟~
• 是否进行缓存

当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。

• 设置模拟限速，如下图所示。
  

设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。

Network主题内容介绍

下列介绍中，前者为名词解释，后者为举例

• Name/Pat：资源名称以及URL路径 （main.css）
• Method：Http请求方法 (GET或者POST)
• status/Text：Http状态码/文字解释 （200，ok）
• Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
• Initiator：解释请求是怎么发起的，有四种可能的值

       1.Parser  ：请求是由页面的html解析时发送
       2.Redirect：请求是由页面重定向发送
       3.script  ：请求是由script脚本处理发送
       4.other   ：请求是由其他过程发送的，比如页面里的Link链接点击

• size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小

请求文件具体说明

点击某个具体请求后的界面，如下图所示：

一共分为四个模块：

• Headers

Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

• Preview：预览面板，用于资源的预览。

Response：响应信息面板包含资源还未进行格式处理的内容

Timing：资源请求的详细信息花费时间

细节补充

对某请求右键，出现页面如下图所示。

• Copy Request Headers：复制HTTP请求头到系统剪贴板

• Copy Response Headers：复制HTTP响应头到系统剪贴板

• Copy Response：复制HTTP响应内容到系统剪贴板

• Copy as
  cURL：将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库，用于配合url语法进行数据传输)

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

[外链图片转存中…(img-8vOpKayf-1715882181965)]