Network 面板#
过滤器#
- 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 状态代码与指定代码匹配的资源。
预览请求内容#
- 浏览器加载时间(概览、概要、请求列表)
- DOMContentLoaded 事件的颜色设置为蓝色，而load 事件设置为红色
- 查看请求上下游：按住 shift 键悬停请求上，绿色是上游,，红色是下游
浏览器加载时间#
触发流程
- 解析 HTML 结构
- 加载外部脚本和样式表文件
- 解析并执行脚本代码 // 部分脚本会阻塞页面的加载
- DOM 树构建完成// DOMContentLoaded 事件
- 加载图片等外部文件
- 页面加载完毕 // load 事件