谷歌浏览器调试模式快捷键了解谷歌浏览器调试模式快捷键( 二 )

6.请求列表
image-20190523142032553
简单介绍下每列的含义：
Name：资源的名称
Status：HTTP状态代码
Type：请求的资源的MIME类型
Initiator：发起请求的对象或进程。它可能有以下几种值：

Parser（解析器）：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）
Redirect（重定向）：HTTP重定向启动了请求
Script（脚本）：脚本启动了请求
Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址。

Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小
Time：总持续时间，从请求的开始到接受响应中的最后一个字节
Waterfall：各请求相关活动的直观分析图
鼠标右键单击，添加其他列：
image-20190523144119290
还可以自定义header头：
image-20190523144534008
7.预览请求内容
如图所示，在请求列表点击以下
image-20190523145421841
功能包括：

查看头部，包括请求头、响应头。
查看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 键悬停请求上，绿色是上游，红色是下游。

下面演示如何查看请求上下游，首先按住 shift 键，其次移动鼠标到不同请求，如图所示：
image-20190523154602391
image-20190523155233126
8.浏览器加载时间
触发流程：

解析 HTML 结构
加载外部脚本和样式表文件
解析并执行脚本代码 // 部分脚本会阻塞页面的加载
DOM 树构建完成 // DOMContentLoaded 事件
加载图片等外部文件
页面加载完毕 // load事件

9.请求时间详细分布
点击请求列表后，找到Timing，看到如图所示的字段
image-20190523162127459
Queueing：浏览器在以下情况下对请求排队

存在更高优先级的请求
此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP/1.0 和 HTTP/1.1
浏览器正在短暂分配磁盘缓存中的空间

Stalled：请求可能会因 Queueing 中描述的任何原因而停止
DNS Lookup：浏览器正在解析请求额IP地址
Proxy Negotiation：浏览器正在与代理服务器协商请求
Request sent：正在发送请求
ServiceWorker Preparation：浏览器正在启动Service Worker
Request to ServiceWorker：正在将请求发送到Service Worker
Waiting（TTFB）：浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte（至第一字节的时间）。此时间包括1次往返延迟时间及服务器准备响应所用的时间
Content Download：浏览器正在接收响应
Receiving Push：浏览器正在通过 HTTP/2 服务器推送接收此响应的数据
Reading Push：浏览器正在读取之前收到的本地数据
10.阻止请求
当某些资源不可用时，页面的外观和行为如何？它完全失败了，还是仍然有些功能？阻止要求查找：
1.按Control+ Shift+ P或 Command+ Shift+ P（Mac）打开命令菜单。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

谷歌浏览器调试模式快捷键了解 谷歌浏览器调试模式快捷键( 二 )

谷歌浏览器调试模式快捷键了解谷歌浏览器调试模式快捷键( 二 )