Chrome DevTools

第一篇  第二篇  第三篇

网络【Network】

检查网络活动

这是与检查页面网络活动相关的一些最常用的 DevTools 功能的动手教程。

何时使用网络面板

通常，当您需要确保按预期下载或上传资源时，请使用【Network】面板。 【Network】面板最常见的用例是：

• 确保资源实际上正在上传或下载。
• 检查单个资源的属性，例如其 HTTP 标头、内容、大小等。

如果您正在寻找提高页面加载性能的方法，请不要从【Network】面板开始。 有许多类型的负载性能问题与网络活动无关。 从【Audits】面板开始，因为它会为您提供有关如何改进页面的有针对性的建议。 请参阅优化网站速度。

打开网络面板

要充分利用本教程，请打开演示并试用演示页面上的功能。

1，打开入门演示。

2，按 Control+Shift+J 或 Command+Option+J (Mac) 打开 DevTools。 【Console】面板打开。

3，单击【Network】选项卡。 【Network】面板打开。

现在【Network】面板是空的。 这是因为 DevTools 仅在打开时记录网络活动，并且自从您打开 DevTools 以来没有发生任何网络活动。

记录网络活动

要查看页面引起的网络活动：

1，重新加载页面。 【Network】面板在网络日志中记录所有网络活动。

 

网络日志的每一行代表一个资源。 默认情况下，资源按时间顺序列出。 顶级资源通常是主 HTML 文档。 底部资源是最后请求的资源。

每列代表有关资源的信息。 上图显示了默认列：

1. 【Status】 HTTP 响应代码。

2. 【Type】 资源类型。

3. 【Initiator】 是什么导致请求资源。 单击 Initiator 列中的链接会将您带到导致请求的源代码。

4. 【Time】请求需要多长时间。

5. 【Waterfall】 请求不同阶段的图形表示。 将鼠标悬停在瀑布上可查看故障。

2，只要您打开 DevTools，它就会在网络日志中记录网络活动。

显示更多信息

网络日志的列是可配置的。 您可以隐藏不使用的列。 还有许多默认隐藏的列，您可能会发现它们很有用。

1，右键单击网络日志表的标题并选择域【Domain】。 现在显示每个资源的域【Domain】。

提示您可以通过将鼠标悬停在名称列中的单元格上来查看资源的完整 URL。 

模拟较慢的网络连接

您用于构建站点的计算机的网络连接速度可能比您用户的移动设备的网络连接速度更快。 通过限制页面，您可以更好地了解页面在移动设备上加载所需的时间。

1，单击【Throttling】下拉列表，默认设置为【Online】。 

2，选择【Slow 3G】。 

3，长按重新加载，然后选择清空缓存和硬重新加载。 

在重复访问时，浏览器通常会从其缓存中提供一些文件，从而加快页面加载速度。【Empty Cache And Hard Reload】强制浏览器访问所有资源。 当您想查看首次访问者如何体验页面加载时，这很有用。注意【Empty Cache And Hard Reload】工作流仅在 DevTools 打开时可用。

 捕获屏幕截图

屏幕截图可让您查看页面在加载时随时间推移的外观。

1，点击【Capture Screenshots】。

通过清空缓存和硬重新加载工作流程再次重新加载页面。 屏幕截图窗格提供了页面在加载过程中各个点的缩略图。

3，单击第一个缩略图。 DevTools 会及时向您显示当时正在发生的网络活动。 

检查资源的详细信息 

单击资源以了解有关它的更多信息。

1，单击【getstarted.html】。 显示【Headers】选项卡。 使用此选项卡检查 HTTP 标头。

2，单击【Preview】选项卡。 显示了 HTML 的基本呈现。 

 3， 单击【Response】选项卡。 显示了 HTML 源代码。

提示 当文件被缩小时，单击【Response】选项卡底部的【{}】按钮会重新设置文件内容的格式，以提高可读性。

4，单击【Timing】选项卡。 显示了此资源的网络活动明细。 

5，单击【X】回到查看网络日志。 

搜索网络标头和响应

当您需要搜索特定字符串或正则表达式的所有资源的 HTTP 标头和响应时，请使用【Search】窗格。

例如，假设您想检查您的资源是否使用了合理的缓存策略。

1，单击【Search】。 搜索窗格在网络日志的左侧打开。 

2，键入 【Cache-Control】 并按 Enter。 【Search】窗格列出了它在资源标题或内容中找到的所有 【Cache-Control】 实例。

3，单击结果以查看它。 如果在标题中找到查询，则会打开【Headers】选项卡。 如果在内容中找到查询，则会打开【Response】选项卡。 

过滤资源

DevTools 提供了大量工作流来过滤掉与手头任务无关的资源。

默认情况下应启用过滤器工具栏。 如果不：单击【小漏斗】以显示它。

1，按字符串、正则表达式或属性过滤

过滤器文本框支持多种不同类型的过滤。

    A，在过滤器文本框中输入【png】。 仅显示包含文本【png】的文件。 在这种情况下，唯一与过滤器匹配的文件是 PNG 图像。

    B，支持正则表达过滤。 

    C，输入【-main.css】。 DevTools 过滤掉【main.css】。 如果任何其他文件与模式匹配，它们也将被过滤掉。

    D，在过滤器文本框中输入【domain:raw.githubusercontent.com】。 DevTools 会过滤掉 URL 与此域不匹配的任何资源。

2，按资源类型过滤

要专注于某种类型的文件，例如【CSS】：

    A，单击【CSS】。 过滤掉所有其他文件类型。

    B，要同时查看脚本，请按住 Control 或 Command (Mac)，然后单击【JS】。 

    C，单击【All】以删除过滤器并再次查看所有资源。

阻止请求

当页面的某些资源不可用时，页面的外观和行为如何？ 它是完全失败了，还是仍然有些功能？ 我们可以通过阻止请求来查看结果：

1，打开命令菜单，键入【block】，选择【Show Network Request Blocking】，然后按【Enter】。

2，单击添加模式【Add pattern】。

3，输入【main.css】，点击【Add】。

 4，重新加载页面。 正如预期的那样，页面的样式有点混乱，因为它的主样式表已被阻止。 请注意网络日志中的 main.css 行。 红色文本表示该资源已被阻止。

网络功能参考

在这份 Chrome DevTools 网络功能分析的综合参考中，探索，分析页面加载方式的新方法。

注意：此参考基于 Chrome 58。如果您使用其他版本的 Chrome，DevTools 的 UI 和功能可能会有所不同。 地址栏访问 【chrome://help】 以查看您正在运行的 Chrome 版本。

记录网络请求

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

1，停止记录网络请求

    A，单击【Network】面板上的【Stop recording network】停止记录网络。 它变成灰色表示 DevTools 不再记录请求。快捷键：按 Command+E (Mac) 或 Control+E（Windows、Linux）。

2，清除请求

    单击【Network】面板上的【Clear】清除表中的所有请求。 

3，跨页面加载保存请求

要跨页面加载保存请求，请选中【Network】面板上的【Preserve log】复选框。 DevTools 会保存所有请求，直到您禁用【Preserve log】。

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

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

要启用屏幕截图，在【Network】面板处于焦点时重新加载页面以捕获屏幕截图。 

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

    A，将鼠标悬停在屏幕截图上可查看该屏幕截图的捕获点。 概述窗格上会出现一条黄线。

    B，单击屏幕截图的缩略图可过滤掉捕获屏幕截图后发生的任何请求。
    C，双击缩略图以放大它。

5， 重放 XHR 请求

    要重放 XHR 请求，请右键单击请求表中的请求并选择重放 XHR。

更改加载行为

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

    要模拟用户首次体验您的网站，请选中【Disable cache】复选框。 DevTools 禁用浏览器缓存。 这更准确地模拟了首次用户的体验，因为在重复访问时会从浏览器缓存中提供请求。

    从【Network conditions】抽屉禁用浏览器缓存，如果您想在其他面板中工作时禁用缓存，请使用【Network conditions】抽屉。

2，手动清除浏览器缓存 

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

3，离线模拟

    有一类新的 Web 应用程序，称为 Progressive Web Apps，它可以在 Service Worker 的帮助下离线运行。 在构建此类应用程序时，离线模拟能够快速模拟没有数据连接的设备。

    从【Network Throttling】选中离线复选框以模拟完全离线的网络体验。

4，模拟慢速网络连接

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

    您可以从各种预设中进行选择，例如常规或良好 2G。 您还可以通过打开【Network Throttling】菜单并选择【Custom】>【Add】来添加您自己的自定义预设。 

    DevTools 会在【Network】选项卡旁边显示一个警告图标，提醒您节流已启用。 

    从【Network conditions】抽屉模拟慢速网络连接，如果您想在其他面板中工作时限制网络连接，请使用网络条件抽屉。

5，手动清除浏览器 cookie

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

6，覆盖用户代理

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

过滤请求

1，按属性过滤请求

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

比如【mime-type: image / gif Greater-than: 1K】显示所有大于一千字节的GIF，这些多属性过滤器等价于AND操作，目前不支持OR操作。

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

    A，【cookie-domain】 显示设置特定 cookie 域的资源。 

    B，【cookie-name】显示设置特定 cookie 名称的资源。 

    C，【cookie-path】显示设置特定cookie路径的资源。

    D，【cookie-value】显示设置特定 cookie 值的资源。 

    【domain】只显示来自指定域的资源。您可以使用通配符【*】来包含多个域。例如【* .com】显示来自所有以【 .com 】结尾的域名的资源。

    【has-response-header】显示包含指定 HTTP 响应标头的资源。

    【is】使用【is:running】查找【WebSocket】资源。

    【larger-than】显示大于指定大小的资源，以字节为单位.。设置值 1000 相当于设置值 1k。

    【method】显示通过指定 HTTP 方法类型检索的资源。DevTools 使用它遇到的所有 method 类型填充自动完成下拉列表。 

    【mime-type】显示指定 MIME 类型的资源。DevTools 使用它遇到的所有 MIME 类型填充自动完成下拉列表。 

    【mixed-content】显示所有混合内容资源【mixed-content:all】或仅显示当前显示的内容【mixed-content:displayed】。 

    【priority】显示优先级与指定值匹配的资源。 

    【resource-type】显示资源类型的资源，例如 图像。 DevTools 使用它遇到的所有资源类型填充自动完成下拉列表。 

    【scheme】显示通过未受保护的 HTTP 【scheme:http】 或受保护的 HTTPS 【scheme:https】 的资源。 

    【set-cookie-domain】 显示具有与指定值匹配的域属性的 【Set-Cookie】 标头的资源。 DevTools 使用它遇到的所有 cookie 域填充自动完成。 

    【set-cookie-name】 显示具有名称与指定值匹配的 【Set-Cookie】 标头的资源。 DevTools 使用它遇到的所有 cookie 名称填充自动完成。 

    【set-cookie-value】 显示具有与指定值匹配的值的 【Set-Cookie】 标头的资源。 DevTools 使用它遇到的所有 cookie 值填充自动完成。

    【status-code】 仅显示 HTTP 状态代码与指定代码匹配的资源。 DevTools 使用它遇到的所有状态代码填充自动完成下拉菜单。

    【url】 显示具有与指定值匹配的 url 的资源。

2，按类型过滤请求

    要按请求类型过滤请求，请单击【Network】面板上的 【XHR】、【JS】、【CSS】、【Img】、【Media】、【Font】、【Doc】、【WS（WebSocket）】、【Manifest】或【Other】。

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

3，按时间过滤请求

    单击并在概览窗格上向左或向右拖动以仅显示在该时间范围内处于活动状态的请求。 过滤器是包容性的。 显示在突出显示时间内处于活动状态的任何请求。

4，隐藏数据URLs

    【Data URLs】是嵌入到其他文档中的小文件。 您在请求表中看到的以 【data:】 开头的任何请求都是数据URLs。

    选中【Hide data URLs】复选框以隐藏这些请求。

排序请求

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

1，按列排序

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

2，按活动阶段排序

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

分析请求

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

1，查看请求日志

    使用【请求表】查看 DevTools 打开时发出的所有请求的日志。 单击或悬停在请求上会显示有关它们的更多信息。

    请求表默认显示以下列：

    【Name】，资源的文件名或标识符。

    【Status】，HTTP 状态代码。

    【Type】，请求资源的 MIME 类型。

    【Initiator】，以下对象或进程可以发起请求：

        【Parser】，Chrome 的 HTML 解析器。

        【Redirect】，HTTP 重定向。

        【Script】，一个 JavaScript 函数。

        【Other】，一些其他过程或操作，例如通过链接导航到页面或在地址栏中输入 URL。

    【Size】，响应标头加上响应正文的组合大小，由服务器提供。

    【Time】，总持续时间，从请求开始到收到响应中的最后一个字节。

    【Waterfall】，每个请求活动的可视化细分。

    添加或删除列，右键单击请求表的标题并选择一个选项以隐藏或显示它。 当前显示的选项旁边有复选标记。

    添加自定义列，要将自定义列添加到请求表，请右键单击请求表的标题并选择【Response Headers】 > 【Manage Header Columns】。 

2，查看彼此相关的请求时间

    使用瀑布来查看彼此相关的请求时间。 默认情况下，瀑布是按请求的开始时间组织的。 因此，更靠左的请求比更靠右的请求开始得更早。

3，分析 WebSocket 连接的帧 (暂时没有图片)

    查看 WebSocket 连接的帧：

        A，单击请求表的【Name】列下的 WebSocket 连接的 URL。

        B，单击【Frames】选项卡。 该表显示了最后 100 帧。

    要刷新表，请重新单击 Requests 表的 Name 列下的 WebSocket 连接的名称。 

    该表包含三列

        【Data】，消息负载。 如果消息是纯文本，则显示在此处。 对于二进制操作码，此列显示操作码的名称和代码。 支持以下操作码：Continuation Frame、Binary Frame、Connection Close Frame、Ping Frame 和 Pong Frame。

        【Length】，消息有效负载的长度，以字节为单位。

        【Time】，接收或发送消息的时间。

    消息根据其类型进行颜色编码：外发的消息为浅绿色，收到的消息是白色的，WebSocket 操作码是浅黄色的，错误为浅红色。

4，查看响应正文的预览

    查看响应正文的预览：A，单击请求表的名称【Name】列下的请求 URL。B，单击预览【Preview】选项卡。此选项卡主要用于查看图像。

5，查看响应正文

    查看请求的响应正文：A，单击请求表的名称【Name】列下的请求 URL。B，单击响应【Response】选项卡。

6，查看 HTTP 标头

    查看有关请求的 HTTP 标头数据：A，单击请求表的名称【Name】列下的请求 URL。 B，单击标题【Headers】选项卡。

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

        A，打开您感兴趣的请求的标头选项卡。请参阅查看 HTTP 标头。

        B，单击【view source】或【Request Header】【Response Header】查看源代码。

    显示临时标题，有时标题会显示警告消息“显示临时标题...”。

        A，这可能是由于请求未通过网络发送（从本地缓存提供），它不存储原始请求标头。 在这种情况下，您可以禁用缓存以查看完整的请求标头。

        B，也可能是由于网络资源无效（例如在控制台中尝试 fetch("https://jec.fyi.com/unknown-url/")）。 由于安全原因，DevTools 也可能只显示临时标题。

7，查看查询字符串参数

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

        A，打开您感兴趣的请求的【Headers】选项卡。请参阅查看 HTTP 标头。

        B，转到【Query String Parameters】部分。

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

        A，转到查询字符串参数部分。 请参阅查看查询字符串参数。

        B，点击【view source】。

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

        A，转到查询字符串参数部分。 请参阅查看查询字符串参数。

        B，点击【view URL encoded】。

8，查看 cookie

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

        A，单击请求表的名称列下的请求 URL。

        B，点击【Cookies】选项卡。

9，查看请求的时间细分

    要查看请求的时间细分：

        A，单击请求表的名称列下的请求 URL。

        B，点击【Timing】选项卡。

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

    时序分解阶段说明，以下是有关您可能在【Timing】选项卡中看到的每个阶段的更多信息：

            A，【Queueing 排队】。浏览器将请求排入队列。有更高优先级的请求。已经为此源打开了六个 TCP 连接，这是限制。 仅适用于 HTTP/1.0 和 HTTP/1.1。浏览器在磁盘缓存中短暂分配空间。 

            B，【Stalled 停滞不前】。请求可能因【Queueing】中描述的任何原因而停止。

            C，【DNS Lookup DNS 查找】。浏览器正在解析请求 IP 地址。

            D，【Initial connection 初始连接】。浏览器正在建立连接，包括 TCP 握手/重试和协商 SSL。

            E，【Proxy negotiation 代理协商】。浏览器正在与代理服务器协商请求。

            F，【Request sent 请求发送】。正在发送请求。

            G，【ServiceWorker Preparation 服务工作者准备】。浏览器正在启动服务工作者。

            H，【Request to ServiceWorker 请求到服务工作者】。请求正在发送给服务工作者。

            I， 【Waiting (TTFB) 等待 (TTFB)】。浏览器正在等待响应的第一个字节。 TTFB 代表 Time To First Byte。 此时间包括 1 次往返延迟和服务器准备响应所用的时间。

            J，【Content Download 内容下载】。浏览器正在接收响应。

            K，【Receiving Push 接收推送】。浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。

            L，【Reading Push 阅读推送】。浏览器正在读取之前接收到的本地数据。

10，查看启动器和依赖项

    要查看请求的发起者和依赖项，请按住 Shift 并将鼠标悬停在请求表中的请求上。 DevTools 将启动器着色为绿色，将依赖项着色为红色。

    当 Requests 表按时间顺序排列时，您悬停在请求上方的第一个绿色请求是依赖项的发起者。 如果上面还有另一个绿色请求，则更高的请求是发起者的发起者，以此类推。

11，查看加载事件

    DevTools 在 Network 面板的多个位置显示 DOMContentLoaded 和 load 事件的时间。 DOMContentLoaded 事件为蓝色，而 load 事件为红色。 12，查看请求总数

    请求总数列在【Network】面板底部的摘要窗格中。

    注意：此数字仅跟踪自 DevTools 打开以来已记录的请求。 如果在打开 DevTools 之前发生了其他请求，则不计算这些请求。

 13，查看总下载大小

    请求的总下载大小列在【Network】面板底部的摘要窗格中。

    注意：此数字仅跟踪自 DevTools 打开以来已记录的请求。 如果在打开 DevTools 之前发生了其他请求，则不计算这些请求。

14，查看导致请求的堆栈跟踪

 15，查看资源的未压缩大小

    单击【Use Large Request Rows】，然后查看大小列的底部值。

导出请求数据

1，将所有网络请求保存到一个 HAR 文件

    A，右键单击请求表中的任何请求。

    B，选择另存为带有内容的 HAR。 DevTools 将自您打开 DevTools 以来发生的所有请求保存到 HAR 文件中。 没有办法过滤请求，或者只保存一个请求。

    获得 HAR 文件后，您可以将其重新导入 DevTools 进行分析。 只需将 HAR 文件拖放到请求表中即可。 另请参见 HAR 分析器。

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

    在请求表的名称列下，右键单击请求，将鼠标悬停在复制上，然后选择以下选项之一：

        A，【Copy Link Address 复制链接地址】。 将请求的 URL 复制到剪贴板。 

        B，【Copy Response 复制响应】。 将响应正文复制到剪贴板。

        C，【Copy as cURL 复制为 cURL】。 将请求复制为 cURL 命令。

        D，【Copy All as cURL 全部复制为 cURL】。 将所有请求复制为一串 cURL 命令。

        E，【Copy All as HAR 全部复制为 HAR】。 将所有请求复制为 HAR 数据。

更改网络面板的布局

    展开或折叠【Network】面板 UI 的特定部分以专注于对您而言重要的内容。 

    1，隐藏过滤器窗格

    默认情况下，DevTools 显示过滤器窗格。 单击过滤器图标将其隐藏。 

    2，使用大请求行

    当您希望网络请求表中有更多空白时，请使用大行。 使用大行时，某些列还会提供更多信息。 例如，Size 列的底部值是请求的未压缩大小。

    打开设置并单击【Use large request rows】以启用大行。

    3，隐藏概览窗格

    默认情况下，DevTools 显示概览窗格。 打开设置并取消选中【Show overview】复选框以隐藏它。