【Chrome控制台】network选项卡的使用

首先打开调试面板「windows:F12;mac:command+option+i」,找到Network选项卡,其中是对网络相关的数据信息。

录制

控制台内容区域左上角红色按钮就是录制按钮,默认是开启状态,表示监听整个页面运行过程中所产生的所有网络请求,一般不需要关闭。

清空

录制按钮右侧的是清空按钮,点击后,会清空目前监控到的所有网络请求。

筛选

清空按钮右侧的是筛选按钮,默认为开启状态。

开启后,下方会多出几种选项,可以根据选项进行筛选。

搜索

通过搜索功能可以快速查找到对应请求

持久日志

选中Preserve log后,将开启持久日志:刷新页面后,不清空日志。

禁用缓存

未开启前,很多请求都走了磁盘缓存,开启后不再使用缓存。

限流器

可以模拟网络速度,默认有快3G、慢3G以及离线三个选项。

请求详情

点击某请求信息后,Headers选项卡中可以看到「头信息」。

Payload选项卡可以查看请求相关参数。

Preview选项卡可以对相应数据进行预览

Response选项卡表示服务器返回的原始数据。

Response 返回的原始数据类型目前只支持纯文本,不支持二进制格式。

Initiator选项卡 :请求的发起者

Timing选项卡:请求的耗时

Queueing对应排队时间:对同一域的请求,开辟的TCP连接数量有限,在同一TCP连接中,只能进行排队。

Resource Scheduling:以下的时间只是进入队列的时间,并不是排队所耗费的总时间。

Connection Start:连接开始

Stalled失速造成时间消耗,具体是因为前方有请求排队,造成了拥堵。

Request/Response:请求响应时间

  • Request sent:浏览器将请求封装起来通过网络关口发出的耗时。
  • Waiting for server response:等待服务器响应的耗时,此时直接收到了响应头信息,并没完全接收到相应数据。
  • Content Download:内容下载时间。

Connection ID:如果ID相同,表示请求共用的同一TCP信道。

Waterfall:请求执行的先后顺序

有红蓝两条竖线,其中蓝色表示:DOMContentLoaded;红色表示:Load。

相关推荐
八号当铺11 分钟前
从 Prompt 到 AI 工程化:理解 Rules、Skills 与 Agent
前端·ai编程·cursor
didadida26215 分钟前
子路径部署 Vue/React 应用偶发白屏
前端·后端
invicinble16 分钟前
前端框架使用vue-cli (第五层:构建打包层--总体层介绍)
前端·vue.js·前端框架
前端那点事20 分钟前
Vuex刷新数据丢失?4种持久化方案全覆盖,从零到项目落地(实战完整版)
前端·vue.js
Cerrda20 分钟前
性能提升 satisfying!一个 Vue3 指令干掉页面上 200 个无用 Tooltip 实例
前端·设计
漫游的渔夫21 分钟前
前端开发者做 AI Agent:别只渲染答案,用 7 个状态接住确认、错误和 trace
前端·人工智能·typescript
clove21 分钟前
从 LLM 到 Agent:一篇文章课带你彻底搞懂 AI 智能体的核心逻辑
前端
前端那点事23 分钟前
彻底吃透JS定时器!setTimeout/setInterval区别、坑点与最优优化方案(Vue实战)
前端·vue.js
ZC跨境爬虫27 分钟前
跟着 MDN 学 HTML day_27:(深入理解 HTML 属性反射机制)
前端·javascript·ui·html·音视频·媒体
ayqy贾杰33 分钟前
过去三年我做对了一件事
前端·面试·ai编程