过滤器:按类型
- XHR、JS、CSS、Img、Media、Font、Doc、WS(WebSocket)、Manifest或Other(此处未列出的任何其他类型)
- 多类型,按住Command(Mac)或Ctrl(Windows、Linux)
- 按时间过滤:概览面板,拖动滚动条
- 隐藏Data URLs:CSS图片等小文件以BASE64格式嵌入HTML中,以减少HTTP请求数
属性过滤(一)
- domain:仅显示来自指定域的资源。您可以使用通配符字符(*)纳入多个域
- has-response-header:显示贪指定HTTP响应标头的资源
- is:使用is:running可以查找WebSocket资源,is:from-cache可查找缓存读出的资源
- larger-than:显示大于指定大小的资源(以字节为单位)。将值设为1000等同于设置为1k
- method:显示通过指定HTTP方法类型检索的资源
- mime-type:显示指定MIME类型的资源
属性过滤(二)
- mixed-content:显示所有混合内容资源(mixed-content:all),或者仅显示当前显示的资源(mixed-content:displayed)。
- scheme:显示通过未保护HTTP(scheme:http)或受保护HTTPS(scheme:https)检索的资源。
- set-cookie-domain:显示具有Set-Cookie标头并且Domain属性与指定值匹配的资源。
- set-cookie-name:显示具有Set-Cookie标头并且名称与指定值匹配的资源。
- set-cookie-value:显示具有Set-Cookie标头并且值与指定值匹配的资源。
- status-code:仅显示HTTP状态代码与指定代码匹配的资源。
请求列表的排序
- 时间排序,默认
- 按列排序
- 按活动时间排序
- Start Time:发出的第一个请求位于顶部
- Response Time:开始下载的第一个请求位于顶部
- End Time:完成的第一个请求位于顶部
- Total Duration:连接设置时间和请求/响应时间最短的请求位于顶部
- Latency:等待最短响应时间的请求位于顶部
请求列表(二)
Initiator:发起请求的对象或进程。它可能有以下几种值:
- Parser(解析器):Chrome的HTML解析器发起了请求
- 鼠标悬停显示JS脚本
- Redirect(重定向):HTTP重定向启动了请求
- Script(脚本):脚本启动了请求
- Other(其他):一些其他进程或动作发起请求,例如用户点击链接跳转到页面或在地址栏中输入网址
预览请求内容(一)
- 查看头部
- 查看cookie
- 预览响应正文:查看图像用
- 查看响应正文
- 时间详细分布
- 导出数据为HAR格式
- 查看未压缩的资源大小:Use Large Request Rows
预览请求内容(二)
- 浏览器加载时间(概览、概要、请求列表)
- DOMContentLoaded事件的颜色设置为蓝色,而load事件设置为红色
- 将请求数据复制到剪贴版
- Copy Link Address:将请求的网址复制到剪贴板
- Copy Response:将响应包体复制到剪贴板
- Copy as CURL:以CURL命令形式复制请求
- Copy All as cURL:以一系列CURL命令形式复制所有请求
- Copy All as HAR:以HAR数据形式复制所有请求
- 查看请求上下游:按住shift键悬停请求上,绿色是上游,红色是下游
浏览器加载时间
触发流程:
- 解析HTML结构
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码//部分脚本会阻塞页面的加载
- DOM树构建完成 // DOMContentLoaded事件
- 加载图片等外部文件
- 页面加载完毕//load事件
请求时间详细分布(一)
- Queueing:浏览器在以下情况下对请求排队
- 存在更高优先级的请求
- 此源已打开六个TCP连接,达到限值,仅适用于HTTP/1.0和HTTP/1.1
- 浏览器正在短暂分配磁盘缓存中的空间
- Stalled:请求可能会因Queueing中描述的任何原因而停止
- DNS Lookup:浏览器正在解析请求的IP地址
- Proxy Negotiation:浏览器正在与代理服务器协商请求
Comments