如何用谷歌浏览器分析网页速度 – 谷歌浏览器帮助文档-www.chromeliulanqi.com

通过Kayce 巴斯克技术作家，Chrome DevTools＆Lighthouse

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

记录网络请求

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

停止记录网络请求

要停止录制请求：

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

清除请求

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

图2。清楚，用蓝色勾勒出来

跨页面加载保存请求

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

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

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

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

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

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

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

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

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

重播XHR请求

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

改变加载行为

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

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

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

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

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

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

手动清除浏览器缓存

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

离线模拟

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

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

图8。“脱机”复选框，以蓝色标出

模拟慢速网络连接

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

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

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

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

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

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

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

手动清除浏览器cookie

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

覆盖用户代理

要手动覆盖用户代理：

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

过滤请求

按属性过滤请求

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

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

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

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

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

domain。仅显示指定域中的资源。您可以使用通配符（*）来包含多个域。例如，*.com 显示以所有域名结尾的资源.com。DevTools使用它遇到的所有域填充自动完成下拉菜单。
has-response-header。显示包含指定HTTP响应标头的资源。DevTools使用它遇到的所有响应标头填充自动完成下拉列表。
is。使用is:running找WebSocket资源。
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使用它遇到的所有状态代码填充自动完成下拉菜单。

按类型过滤请求

要按请求类型筛选请求，请单击“网络”面板上的XHR，JS，CSS， Img，媒体，字体，文档，WS（WebSocket），清单或其他（此处未列出的任何其他类型）按钮。

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

要同时启用多个类型过滤器，请按住Command （Mac）或Control（Windows，Linux），然后单击。

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

按时间过滤请求

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

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

隐藏数据网址

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

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

图14。隐藏数据URL复选框

排序请求

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

按列排序

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

按活动阶段排序

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

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

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

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

分析请求

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

查看请求日志

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

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

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

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

添加或删除列

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

添加自定义列

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

查看彼此相关的请求时间

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

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

分析WebSocket连接的帧

要查看WebSocket连接的框架：

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

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

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

该表包含三列：

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

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

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

查看响应正文的预览

要查看响应正文的预览：

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

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

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

查看回复正文

要查看请求的响应正文：

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

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

查看HTTP标头

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

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

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

查看HTTP标头源

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

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

查看查询字符串参数

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

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

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

查看查询字符串参数源

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

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

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

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

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

查看cookie

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

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

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

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

查看请求的时间细分

要查看请求的时间细分：

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

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

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

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

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

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

预览时间细分

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

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

时间分解阶段解释

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

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