如何用谷歌浏览器分析网页速度

凯斯巴斯克斯

通过Kayce?巴斯克技术作家,Chrome DevTools&Lighthouse

在这个全面的Chrome DevTools网络分析功能参考中,探索分析页面加载方式的新方法。注意:此参考文献基于Chrome 58.如果您使用其他版本的Chrome,则DevTools的用户界面和功能可能会有所不同。检查chrome://help您正在运行的Chrome版本。

记录网络请求

默认情况下,只要DevTools处于打开状态,DevTools就会在“网络”面板中记录所有网络请求。

网络面板。
图1。网络面板

停止记录网络请求

要停止录制请求:

  • 单击?网络”面板上的“?停止录制网络日志?”?它变为灰色表示DevTools不再记录请求。
  • 在“网络”面板处于焦点时按Command+?E(Mac)或?Control+?E(Windows,Linux)。

清除请求

明确

单击“网络”面板上的“?清除??”以清除“请求”表中的所有请求。

清除按钮。
图2。清楚,用蓝色勾勒出来

跨页面加载保存请求

要跨页面加载保存请求,请选中“网络”面板上的“?保留日志”复选框。DevTools保存所有请求,直到您禁用?保留日志

保留日志复选框。
图3。“保留日志”复选框,以蓝色标出

在页面加载期间捕获屏幕截图

捕获屏幕截图以分析用户在等待页面加载时看到的内容。

捕获屏幕截图

要启用屏幕截图,请单击“网络”面板上的“?捕获屏幕截图??”。启用后会变为蓝色。

在“网络”面板处于焦点时重新加载页面以捕获屏幕截图。

捕获后,您可以通过以下方式与屏幕截图进行交互:

  • 将鼠标悬停在屏幕截图上可查看捕获屏幕截图的位置。“概述”窗格中将显示一条黄线。
  • 单击屏幕截图的缩略图以过滤掉捕获屏幕截图后发生的任何请求。
  • 双击缩略图以放大缩略图。

将鼠标悬停在屏幕截图上。
图4。将鼠标悬停在屏幕截图上。“概述”窗格和“瀑布”中的黄色垂直线表示捕获屏幕截图的时间。

重播XHR请求

要重播XHR请求,请右键单击“请求”表中的请求,然后选择“?重播XHR”

选择重播XHR。
图5。选择重播XHR

改变加载行为

通过禁用浏览器缓存来模拟首次访问者

要模拟首次使用者体验您网站的方式,请选中“?禁用缓存”复选框。DevTools禁用浏览器缓存。这更准确地模拟了首次用户的体验,因为请求是在重复访问时从浏览器缓存提供的。

禁用缓存复选框。
图6。“禁用缓存”复选框,以蓝色标出

从“网络条件”抽屉中禁用浏览器缓存

如果要在其他DevTools面板中工作时禁用缓存,请使用“网络条件”抽屉。

  1. 打开“?网络条件”抽屉
  2. 选中或取消选中“?禁用缓存”复选框。

手动清除浏览器缓存

要随时手动清除浏览器缓存,请右键单击“请求”表中的任意位置,然后选择“?清除浏览器缓存”

选择清除浏览器缓存。
图7。选择清除浏览器缓存

离线模拟

有一类新的Web应用程序,称为Progressive Web Apps,可以在服务工作者的帮助下脱机运行。在构建此类应用程序时,能够快速模拟没有数据连接的设备非常有用。

选中“?脱机”复选框以模拟完全脱机的网络体验。

离线复选框
图8。“脱机”复选框,以蓝色标出

模拟慢速网络连接

Network Throttling?菜单模拟2G,3G和其他连接速度。

网络限制菜单。
图9。网络限制菜单,以蓝色标出

您可以从各种预设中进行选择,例如Regular或Good 2G。您还可以通过打开“网络限制”菜单并选择“?自定义”?>“?添加”来添加自己的自定义预设。

DevTools在“?网络”选项卡旁边显示一个警告图标,提醒您已启用限制。

从“网络条件”抽屉模拟慢速网络连接

如果要在其他DevTools面板中工作时节流网络连接,请使用“网络条件”抽屉。

  1. 打开“?网络条件”抽屉
  2. Network Throttling菜单中选择所需的连接速度。

手动清除浏览器cookie

要随时手动清除浏览器cookie,请右键单击“请求”表中的任意位置,然后选择“?清除浏览器Cookie”

选择清除浏览器Cookie。
图10。选择清除浏览器Cookie

覆盖用户代理

要手动覆盖用户代理:

  1. 打开“?网络条件”抽屉
  2. 取消选中自动选择
  3. 从菜单中选择用户代理选项,或在文本框中输入自定义选项。

过滤请求

按属性过滤请求

使用“?过滤器”文本框按属性过滤请求,例如请求的域或大小。

如果您看不到文本框,则可能隐藏了“过滤器”窗格。请参见隐藏过滤器窗格

“过滤器”文本框。
图11。“过滤器”文本框,以蓝色标出

通过使用空格分隔每个属性,可以同时使用多个属性。例如,mime-type:image/gif larger-than:1K显示大于一千字节的所有GIF。这些多属性过滤器等同于AND操作。目前不支持OR操作。

以下是支持的属性的完整列表。

  • domain。仅显示指定域中的资源。您可以使用通配符(*)来包含多个域。例如,*.com?显示以所有域名结尾的资源.com。DevTools使用它遇到的所有域填充自动完成下拉菜单。
  • has-response-header。显示包含指定HTTP响应标头的资源。DevTools使用它遇到的所有响应标头填充自动完成下拉列表。
  • is。使用is:runningWebSocket资源。
  • larger-than。显示大于指定大小的资源(以字节为单位)。设置值1000等于设置值1k
  • method。显示通过指定的HTTP方法类型检索的资源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
  • mime-type。显示指定MIME类型的资源。DevTools使用它遇到的所有MIME类型填充下拉列表。
  • mixed-content。显示所有混合内容资源(mixed-content:all)或仅显示当前显示的资源(mixed-content:displayed)。
  • scheme。显示通过不受保护的HTTP(scheme:http)或受保护的HTTPS(scheme:https)检索的资源。
  • set-cookie-domain。显示具有Set-Cookie标题的资源,该标题具有Domain与指定值匹配的属性。DevTools使用它遇到的所有cookie域填充自动完成。
  • set-cookie-name。显示具有Set-Cookie名称与指定值匹配的标头的资源。DevTools使用它遇到的所有cookie名称填充自动完成。
  • set-cookie-value。显示具有Set-Cookie与指定值匹配的值的标头的资源。DevTools使用它遇到的所有cookie值填充自动完成。
  • status-code。仅显示HTTP状态代码与指定代码匹配的资源。DevTools使用它遇到的所有状态代码填充自动完成下拉菜单。

按类型过滤请求

要按请求类型筛选请求,请单击“网络”面板上的XHRJSCSS,?Img媒体字体文档WS(WebSocket),清单其他(此处未列出的任何其他类型)按钮。

如果您看不到这些按钮,则可能隐藏了“过滤器”窗格。请参见隐藏过滤器窗格

要同时启用多个类型过滤器,请按住Command?(Mac)或Control(Windows,Linux),然后单击。

使用Type过滤器显示JS,CSS和Doc [ument]资源。
图12。使用Type过滤器显示JS,CSS和Doc [ument]资源。

按时间过滤请求

单击并在“概述”窗格中向左或向右拖动,仅显示在该时间范围内处于活动状态的请求。过滤器是包含在内的。显示在突出显示的时间内处于活动状态的任何请求。

过滤掉2500ms左右未激活的任何请求。
图13。过滤掉2500ms左右未激活的任何请求

隐藏数据网址

数据URL是嵌入到其他文档中的小文件。您在Requests表中看到的任何请求?data:都是数据URL。

选中隐藏数据URL复选框以隐藏这些请求。

隐藏数据URL复选框。
图14。隐藏数据URL复选框

排序请求

默认情况下,“请求”表中的请求按启动时间排序,但您可以使用其他条件对表进行排序。

按列排序

单击“请求”中任何列的标题,以按该列对请求进行排序。

按活动阶段排序

要更改Waterfall排序请求的方式,请右键单击“请求”表的标题,将鼠标悬停在“?瀑布”上,然后选择以下选项之一:

  • 开始时间。启动的第一个请求位于顶部。
  • 响应时间。开始下载的第一个请求位于顶部。
  • 结束时间。完成的第一个请求位于顶部。
  • 总持续时间。具有最短连接设置和请求/响应的请求位于顶部。
  • 延迟。等待最短响应时间的请求位于顶部。

这些描述假设每个相应的选项从最短到最长排名。单击Waterfall列的标题可以反转顺序。

按总持续时间对瀑布进行排序。
图15。按总持续时间对瀑布进行排序。每个酒吧较轻的部分是等待的时间。较暗的部分是下载字节所花费的时间。

分析请求

只要DevTools处于打开状态,它就会在“网络”面板中记录所有请求。使用“网络”面板分析请求。

查看请求日志

使用“请求”表查看DevTools打开时所做的所有请求的日志。单击或将鼠标悬停在请求上会显示有关它们的更多信息。

请求表。
图16。请求表,以蓝色标出

“请求”表默认显示以下列:

  • 名字。资源的文件名或标识符。
  • 现状。HTTP状态代码。
  • 输入。请求的资源的MIME类型。
  • 发起人。以下对象或进程可以发起请求:
    • 解析器。Chrome的HTML解析器。
    • 重定向。HTTP重定向。
    • 脚本。一个JavaScript函数。
    • 其他。其他一些流程或操作,例如通过链接导航到页面或在地址栏中输入URL。
  • 大小。响应标头与响应主体的组合大小,由服务器提供。
  • 时间。从请求开始到响应中最后一个字节的接收的总持续时间。
  • 瀑布。每个请求的活动的视觉细分。

添加或删除列

右键单击“请求”表的标题,然后选择隐藏或显示它的选项。当前显示的选项旁边有复选标记。

将列添加到“请求”表。
图17。将列添加到“请求”表。

添加自定义列

要将自定义列添加到“请求”表,请右键单击“请求”表的标题,然后选择“?响应标题”?>“?管理标题列”

将自定义列添加到“请求”表。
图18。将自定义列添加到“请求”表。

查看彼此相关的请求时间

使用瀑布查看彼此相关的请求时间。默认情况下,瀑布按请求的开始时间进行组织。因此,远离左侧的请求比远离右侧的请求更早开始。

请参阅按活动阶段排序,以查看可以对瀑布进行排序的不同方法。

“请求”窗格的“瀑布”列。
图19。“请求”窗格的“瀑布”列。

分析WebSocket连接的帧

要查看WebSocket连接的框架:

  1. 单击“?请求”表的“?名称”列下的WebSocket连接的URL?。
  2. 单击“?框架”选项卡。该表显示了最后100帧。

要刷新表,请在“请求”表的“?名称”列下重新单击WebSocket连接的?名称

框架选项卡。
图20。框架选项卡,以蓝色标出

该表包含三列:

  • 数据。消息有效负载。如果邮件是纯文本,则会在此处显示。对于二进制操作码,此列显示操作码的名称和代码。支持以下操作码:Continuation Frame,Binary Frame,Connection Close Frame,Ping Frame和Pong Frame。
  • 长度。消息有效负载的长度,以字节为单位。
  • 时间。收到或发送邮件的时间。

消息根据其类型进行颜色编码:

  • 传出的短信是浅绿色的。
  • 传入的短信是白色的。
  • WebSocket操作码是浅黄色的。
  • 错误是浅红色的。

查看响应正文的预览

要查看响应正文的预览:

  1. 单击“?请求”表的“?名称”列下的请求的URL?。
  2. 单击“?预览”选项卡。

此选项卡主要用于查看图像。

预览选项卡。
图21。预览选项卡,以蓝色标出

查看回复正文

要查看请求的响应正文:

  1. 单击“?请求”表的“?名称”列下的请求的URL?。
  2. 单击“?响应”选项卡。

响应选项卡。
图22。“响应”选项卡,以蓝色标出

查看HTTP标头

要查看有关请求的HTTP标头数据:

  1. 在“请求”表的“?名称”列下单击请求的URL?。
  2. 单击“?标题”选项卡。

标题选项卡。
图23。标题选项卡,以蓝色标出

查看HTTP标头源

默认情况下,“标题”选项卡按字母顺序显示标题名称。要按收到的顺序查看HTTP标头名称:

  1. 打开您感兴趣的请求的标题选项卡。请参阅?查看HTTP标头
  2. 单击“?请求标头”或“?响应标头”部分旁边的“?查看源”

查看查询字符串参数

要以人类可读的格式查看URL的查询字符串参数:

  1. 打开您感兴趣的请求的标题选项卡。请参阅?查看HTTP标头
  2. 转到“?查询字符串参数”部分。

查询字符串参数部分。
图24。“查询字符串参数”部分,以蓝色标出

查看查询字符串参数源

要查看请求的查询字符串参数源:

  1. 转到“查询字符串参数”部分。请参阅查看查询字符串参数
  2. 单击查看源

查看URL编码的查询字符串参数

要以人类可读的格式查看查询字符串参数,但保留了编码:

  1. 转到“查询字符串参数”部分。请参阅查看查询字符串参数
  2. 单击查看URL编码

查看cookie

要查看请求的HTTP标头中发送的cookie:

  1. 单击“?请求”表的“?名称”列下的请求的URL?。
  2. 单击Cookies选项卡。

有关每个列的说明,请参阅字段

Cookies选项卡。
图25。Cookies选项卡,以蓝色标出

查看请求的时间细分

要查看请求的时间细分:

  1. 单击“?请求”表的“?名称”列下的请求的URL?。
  2. 单击“?计时”选项卡。

请参阅预览时序细分,以便更快地访问此数据。

有关您可能在“时序”选项卡中看到的每个阶段的详细信息,请参阅时序分解阶段

时间选项卡。
图26。时间选项卡,以蓝色标出

以下是有关每个阶段的更多信息。

有关访问此视图的另一种方法,请参阅查看时间细分

预览时间细分

要查看请求的计时细分预览,请将鼠标悬停在“请求”表的“?瀑布”列中的请求条目上。

请参阅查看请求的时间细分,以获取访问此数据的方法,该方法不需要悬停。

预览请求的时间细分。
图27。预览请求的时间细分

时间分解阶段解释

以下是有关您在“时序”选项卡中可能会看到的每个阶段的更多信息:

  • 排队。浏览器在以下时间排队请求:
    • 有更高优先级的请求。
    • 此源已打开六个TCP连接,这是限制。仅适用于HTTP / 1.0和HTTP / 1.1。
    • 浏览器正在短暂分配磁盘缓存中的空间
  • 停滞不前。由于排队中描述的任何原因,请求可能会停止。
  • DNS查找。浏览器正在解析请求的IP地址。
  • 代理协商。浏览器正在与代理服务器协商请求。
  • 请求已发送。请求正在发送。
  • ServiceWorker准备。浏览器正在启动服务工作者。
  • 请求ServiceWorker。请求将发送给服务工作者。
  • 等待(TTFB)。浏览器正在等待响应的第一个字节。TTFB代表Time To First Byte。此时间包括1次往返延迟和服务器准备响应所用的时间。
  • 内容下载。浏览器正在接收响应。
  • 接收推送。浏览器通过HTTP / 2服务器推送接收此响应的数据。
  • 读推。浏览器正在读取先前收到的本地数据。

查看启动器和依赖项

要查看请求的启动器和依赖项,Shift?请在“请求”表中按住并将鼠标悬停在请求上。DevTools将启动器颜色设置为绿色,依赖关系设置为红色。

查看请求的启动器和依赖项。
图28。查看请求的启动器和依赖项

当Requests表按时间顺序排序时,您悬停在请求上方的第一个绿色请求是依赖项的发起者。如果上面有另一个绿色请求,则该更高的请求是发起者的发起者。等等。

查看加载事件

DevTools?在“网络”面板上的多个位置显示DOMContentLoadedload事件的时间。该DOMContentLoaded事件为蓝色,load事件为红色。

“网络”面板上DOMContentLoaded和加载事件的位置。
图29。“?网络”面板中的事件DOMContentLoaded和?load事件?的位置

查看请求总数

“网络”面板底部的“摘要”窗格中列出了请求总数。警告:此数字仅跟踪自DevTools打开以来记录的请求。如果在DevTools打开之前发生了其他请求,则不会计算这些请求。

自DevTools打开以来的请求总数
图30。自DevTools打开以来的请求总数

查看总下载大小

请求的总下载大小列在“网络”面板底部的“摘要”窗格中。警告:此数字仅跟踪自DevTools打开以来记录的请求。如果在DevTools打开之前发生了其他请求,则不会计算这些请求。

请求的总下载大小
图31。请求的总下载大小

请参阅查看资源的未压缩大小以查看浏览器解压缩后资源的大小

查看导致请求的堆栈跟踪

当JavaScript语句导致请求资源时,将鼠标悬停在Initiator?列上以查看导致请求的堆栈跟踪。

堆栈跟踪导致资源请求
图32。堆栈跟踪导致资源请求

查看资源的未压缩大小

使用大请求行

单击“?使用大型请求行”?,然后查看“?大小”列的底部值。

未压缩资源的示例。
图33jquery-bundle.js通过网络发送的文件30.9 KB的压缩大小是,而未压缩的大小是?86.3 KB

导出请求数据

将所有网络请求保存到HAR文件

要将所有网络请求保存到HAR文件:

  1. 右键单击“请求”表中的任何请求。
  2. 选择另存为内容HAR。DevTools保存自您将DevTools打开到HAR文件以来发生的所有请求。无法过滤请求或仅保存单个请求。

获得HAR文件后,可以将其导入DevTools进行分析。只需将HAR文件拖放到“请求”表中即可。另请参阅HAR Analyzer

选择另存为内容HAR。
图34。选择另存为内容HAR

将一个或多个请求复制到剪贴板

在“?请求”表的“?名称”列下,右键单击某个请求,将鼠标悬停在“?复制”上,然后选择以下选项之一:

  • 复制链接地址。将请求的URL复制到剪贴板。
  • 复制响应。将响应正文复制到剪贴板。
  • 复制为cURL。将请求复制为cURL命令。
  • 全部复制为cURL。将所有请求复制为一系列cURL命令。
  • 全部复制为HAR。将所有请求复制为HAR数据。

选择复制响应。
图35。选择复制响应

更改“网络”面板的布局

展开或折叠“网络”面板UI的各个部分,以关注对您来说重要的内容。

隐藏“过滤器”窗格

过滤

默认情况下,DevTools显示“?过滤器”窗格。单击“?过滤”?以隐藏它。

隐藏过滤器按钮
图36。隐藏过滤器,以蓝色标出

使用大型请求行

如果需要在网络请求表中添加更多空格,请使用大行。使用大行时,某些列还提供了更多信息。例如,“?大小”?列的底部值是请求的未压缩大小。

“请求”窗格中的大型请求行的示例。
图37。“请求”窗格中的大型请求行的示例

使用大型请求行

单击“?使用大型请求行”?以启用大行。

Large Request Rows按钮
图38。大请求行,以蓝色标出

隐藏“概述”窗格

隐藏概述

默认情况下,DevTools显示“?概述”窗格。单击隐藏概述?以隐藏它。

隐藏概述按钮
图39。隐藏概述,以蓝色标出

发表评论