chorme-调试模式基本使用

按F12,或者右键审查,弹出调试页面
chorme-调试模式基本使用_第1张图片
从上图一共分为4个区域(个人理解)
1区域:菜单区域
2区域:算是辅助工具
3区域:请求事件时间区域
4区域:显示加载页

1区域:菜单区域
Elements可以查看页面展示代码,了解页面构成
Console可以查看页面打印日志
Sources加载的资源,包括JS,图片等等
NetWork:网络请求的各种信息
Application包含各种缓存信息(cookie 本地缓存 session)
Memory:存储快照

NetWork:
在这里插入图片描述
第一个红色小圆圈为红色时,代表录制网络日志,也就是我们能看到访问了那些请求。
第二个表示清空
第三个是过滤请求:可以输入需要特定搜索查看的请求
Preserve log勾选表示缓存以前页面的各种请求
disable cache禁用缓存(尚不清楚什么功能)
在这里插入图片描述
这个展示我们需要查看的分类,All Js XHR(常用) Img
下面显示在相应的时间里对应的请求,以竖线的形式显示

chorme-调试模式基本使用_第2张图片
此处显示的是,具体的加载请求信息,包含name,status,协议,大小,加载时间,图形化展示的跳转时间

Queuing(排队)
Stalled(停滞)
如果适用:DNS lookup(DNS查找), initial connection(初始连接), SSL handshake(SSL握手) Request sent(请求发送)
Waiting(等待)(到开始下载第一个字节的时间(TTFB))
Content Download(内容下载)

Explanation:此次请求总计耗时
在这里插入图片描述
第一项,展示的请求/总请求数量
第二项,所展示的transferred/总transferred
第三项,所展示的资源容量/总资源容量
第四项,Finish表示加完总耗时
第五六项,加载DOM耗时

参考(Chrome 开发者工具中文文档):
https://www.html.cn/doc/chrome-devtools/network-performance/resource-loading/

你可能感兴趣的:(chorme-调试模式基本使用)