您现在的位置是：首页 >技术教程 >【Chrome 开发者工具】network面板网站首页技术教程

Chrome 开发者工具是一套内置于 Google Chrome 浏览器中的 Web 开发和调试工具，能够帮助开发者对网站进行迭代、调试和分析。其中，Network 面板是开发者工具中用于测量网站网络性能的重要工具。本文将详细介绍如何使用 Network 面板来记录、分析和优化网站的网络活动。

一、Network 面板的打开方式

要使用 Network 面板，首先需要打开 Chrome 开发者工具。以下是三种常见的打开方式：

1. 通过 Chrome 菜单：在 Chrome 浏览器中，点击右上角的菜单按钮，选择“更多工具” > “开发者工具”。

2. 通过右键菜单：在网页的任意元素上右键点击，选择“检查”选项。

3. 使用快捷键：在 Windows 系统上，按下 Ctrl + Shift + I；在 Mac 系统上，按下 Cmd + Opt + I。

二、Network 面板的作用

Network 面板能够记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头、Cookie 等。它的主要作用包括：

1. 记录和分析网络活动：通过 Network 面板，开发者可以实时查看网页加载过程中所有的网络请求，并分析每个请求的详细信息。

2. 查看资源加载信息：可以整体或单独查看每个资源的加载情况，包括加载时间、文件大小、状态码等。

3. 过滤和排序资源：通过过滤器，开发者可以根据需求筛选出特定的资源，并按照不同的条件（如时间、文件类型等）进行排序。

4. 保存、复制和清除网络记录：开发者可以保存当前的网络记录，方便后续分析，也可以复制特定请求的信息或清除当前的记录。

5. 自定义 Network 面板：根据开发需求，开发者可以自定义 Network 面板的显示内容和布局。

三、Network 面板的组成

Network 面板由五个主要部分组成，每个部分都有其特定的功能：

1. Controls（控制栏）：位于面板顶部，提供了一些控制选项，用于调整 Network 面板的外观和功能。例如，可以启用或禁用网络请求的记录，模拟不同的网络速度等。

2. Filters（过滤器）：位于控制栏下方，用于筛选在 Requests Table 中显示的资源。开发者可以根据文件类型、请求状态等条件进行过滤。提示：按住 Cmd（Mac）或 Ctrl（Windows/Linux）并点击过滤器，可以同时选择多个过滤器。

3. Overview（概览）：位于面板的上部，显示了一个时间线图表，展示了资源检索的时间线。如果看到多条竖线堆叠在一起，说明这些资源是同时被检索的。

4. Requests Table（请求表格）：这是 Network 面板的核心部分，列出了所有检索到的资源。默认情况下，表格按时间顺序排序，最早的资源显示在顶部。点击资源的名称可以查看更详细的信息，如请求头、响应头、响应内容等。提示：右键点击 Timeline 以外的任何一个表格标题，可以添加或移除信息列。

5. Summary（摘要）：位于面板底部，提供了当前网络请求的总体信息，包括请求总数、传输的数据量以及页面加载的总时间。

四、Controls（控制栏）详解

Controls（控制栏）是 Network 面板顶部的操作栏，提供了一系列按钮和选项，用于控制网络请求的记录、过滤、模拟环境及面板显示方式。以下是 Controls 栏中各个功能的详细说明：

4.1 Record 按钮（记录开关）

• 功能：控制是否记录网络请求。红色：正在记录网络活动（默认状态）；灰色：停止记录。

• 快捷键：Cmd/Ctrl + E。

• 使用场景：

  • 停止记录后，可保留当前已捕获的请求，避免新请求干扰分析。

  • 重新开始记录时，旧的请求数据会被自动清除（除非启用 Preserve log）。

4.2 Clear 按钮（清除记录）

• 功能：清空当前捕获的所有网络请求和关联数据。

• 快捷键：Cmd/Ctrl + L（Windows/Mac）。

• 使用场景：

  • 重新加载页面后，清除旧数据以聚焦新请求。

  • 调试过程中快速重置分析环境。

4.3 Filter 输入框（过滤请求）

• 功能：通过关键字或语法快速筛选请求。

• 语法示例：

  • domain:example.com：显示来自 example.com 的请求。

  • status-code:404：筛选状态码为 404 的请求。

  • larger-than:1M：显示大小超过 1MB 的资源。

  • 支持组合多个条件（如 method:POST status-code:200）。

4.4 Preserve log（保留日志）

• 功能：在页面跳转或重新加载时保留已捕获的网络请求。

• 使用场景：

  • 分析页面导航过程中的连续请求（如单页应用）。

  • 调试表单提交后跳转页面的网络行为。

4.5 Disable cache（禁用缓存）

• 功能：强制浏览器不使用本地缓存，模拟首次访问页面的行为。

• 使用场景：

  • 测试资源未命中缓存时的加载性能。

  • 确保每次请求都从服务器获取最新内容。

4.6 Throttling（网络节流）

• 功能：模拟不同网络环境（如慢速 3G、4G），分析网站在弱网条件下的表现。

• 下拉菜单选项：

  • Online：正常网络（默认）。

  • Fast 3G / Slow 3G：模拟 3G 网络速度。

  • Custom：自定义带宽、延迟等参数。

  • Offline：完全离线模式。

• 使用场景：

  • 测试页面在低速网络下的加载时间和资源优先级。

  • 验证离线缓存（Service Worker）的功能。

  • 模拟弱网测试

五、使用 Filters 过滤请求

5.1 常用的过滤功能

在 Network 面板中，Filters（过滤器） 是一个非常实用的功能，可以帮助开发者快速筛选出特定的网络请求。默认情况下，Filters 提供了多种过滤条件，例如：

• All：显示所有请求。

• XHR：仅显示 XMLHttpRequest 请求（通常用于 AJAX 请求）。

• JS：仅显示 JavaScript 文件。

• CSS：仅显示样式表文件。

• Img：仅显示图片资源。

• Media：仅显示媒体文件（如视频、音频）。

• Doc：仅显示 HTML 文档。

• WS：仅显示 WebSocket 请求。

• Other：显示其他类型的请求。

5.2 多条件过滤

如果需要同时应用多个过滤条件，可以按住 Cmd（Mac）或 Ctrl（Windows/Linux）并点击多个过滤器。例如，同时选择 JS 和 CSS，可以筛选出所有的 JavaScript 和 CSS 文件。

5.3 自定义过滤

除了默认的过滤器，开发者还可以通过输入关键字来进一步筛选请求。例如：

• 输入 domain:example.com，可以筛选出所有来自 example.com 的请求。

• 输入 status-code:404，可以筛选出所有状态码为 404 的请求。

• 输入 larger-than:1M，可以筛选出所有大小超过 1MB 的资源。

六、Overview（概览）详解

Overview（概览） 是 Network 面板中的一个可视化区域，位于面板的次顶部，用于展示页面加载过程中所有网络请求的时间线。它提供了一个全局视角，帮助开发者快速了解资源的加载顺序、并发情况以及整体性能表现。

6.1 Overview 的作用

• 展示时间线：以图表形式显示所有网络请求的开始时间、持续时间和结束时间。

• 识别并发请求：通过竖线的堆叠情况，判断哪些资源是同时加载的。

• 定位性能瓶颈：通过时间线的分布，快速发现加载时间较长的资源或阶段。

6.2 Overview 的组成

Overview 区域通常由以下几个部分组成：

1. 时间轴：

   • 水平轴表示时间，从左到右依次为页面加载的开始到结束。

   • 时间单位可以是毫秒（ms）或秒（s），具体取决于加载的总时长。

2. 资源条：

   • 每个网络请求在时间轴上显示为一个水平条。

   • 条的长度表示请求的持续时间，条的颜色表示请求的类型（如文档、脚本、图片等）。

3. 瀑布流指示：

   • 在时间轴下方，Overview 与 Requests Table 的瀑布流（Waterfall）区域联动。

   • 鼠标悬停在某个资源条上时，瀑布流区域会高亮显示对应的请求。

6.3 Overview解析

• 竖线堆叠：

  • 如果多条竖线在同一时间点堆叠，说明这些资源是同时加载的。

  • 堆叠过多可能表明浏览器并发请求数达到上限，需要优化资源加载顺序。

• 颜色区分：

  • 不同颜色的资源条代表不同类型的请求（如蓝色表示文档，绿色表示脚本，紫色表示图片等）。

  • 通过颜色可以快速识别页面中占比较大的资源类型。

• 时间分布：

  • 查看资源条在时间轴上的分布情况，判断是否存在明显的加载延迟或阻塞。

6.4 与 Requests Table 的联动

• 联动显示：

  • 在 Overview 中点击某个资源条，Requests Table 会自动滚动到对应的请求行。

  • 在 Requests Table 中选择某个请求，Overview 会高亮显示该请求的时间线。

• 缩放功能：

  • 在 Overview 区域拖动鼠标，可以选择一个时间范围，Requests Table 会自动过滤显示该时间范围内的请求。

  • 双击 Overview 区域可重置缩放。

6.5 与幻灯片功能的结合

• 屏幕截图指示：

  • 如果启用了幻灯片功能（捕捉页面加载过程中的屏幕截图），Overview 区域上方会显示捕捉的截图。

  • 将鼠标悬停在某个截图上时，Overview 的时间轴上会显示一条黄色竖线，指示该截图对应的捕捉时间。

• 分析渲染性能：结合屏幕截图和时间线，可以直观地分析页面内容的渲染顺序和速度。

6.6. 使用场景

• 优化资源加载：通过 Overview 识别加载时间较长的资源，优化其加载顺序或压缩文件大小。

• 分析并发请求：查看并发请求的数量和分布，判断是否需要调整资源的分片或域名分片策略。

• 定位性能瓶颈：结合瀑布流和屏幕截图，定位页面加载过程中的性能瓶颈（如 DNS 查询、TCP 连接、资源阻塞等）。

七、Requests Table（请求表格）

7.1 Requests Table默认列

在 Network 面板中，Requests Table（请求表格） 是展示所有网络请求的核心部分。默认情况下，Requests Table 会显示以下列：

1. Name（名称）：显示资源的名称或请求的 URL。

2. Status（状态）：显示 HTTP 状态码（如 200、404 等），表示请求的成功或失败状态。

3. Type（类型）：显示资源的类型（如文档、脚本、样式表、图片等）。

4. Initiator（发起者）：显示发起该请求的来源，可能是某个脚本文件或解析器。

5. Size（大小）：显示资源的大小，包括响应头和响应体的总大小。

6. Time（时间）：显示从发起请求到接收完整响应所花费的总时间。

7. Waterfall（瀑布流）：以可视化的方式展示请求的时间线，包括排队、连接、等待和接收数据的时间。

7.2 Requests Table 自定义列

除了默认显示的列，开发者可以根据需求添加或移除列。具体操作如下：

1. 添加列：在 Requests Table 的表头栏上右键点击，会弹出一个菜单，列出了所有可用的列选项。勾选你希望显示的列即可将其添加到表格中。

2. 移除列：同样地，在表头栏上右键点击，取消勾选不需要的列即可将其移除。

以下是一些常用的可选列：

• Domain（域名）：显示请求的域名。

• Method（方法）：显示 HTTP 请求方法（如 GET、POST 等）。

• Protocol（协议）：显示请求使用的协议（如 HTTP/1.1、HTTP/2 等）。

• Remote Address（远程地址）：显示请求的目标服务器地址。

• Cache Status（缓存状态）：显示资源是否从缓存中加载。

• Priority（优先级）：显示浏览器为请求分配的优先级。

7.3 Requests Table 分析请求的详细信息

在 Requests Table 中，点击某个请求的名称，可以查看该请求的详细信息。详细信息面板通常分为以下几个标签页：

1. Headers（请求头）：显示请求的 HTTP 头和响应头信息，包括请求方法、URL、状态码、请求头字段、响应头字段等。

2. Preview（预览）：对于图片、JSON、HTML 等资源，可以在此标签页中预览内容。

3. Response（响应）：显示服务器返回的原始响应内容。

4. Timing（时间）：显示请求的详细时间信息，包括 DNS 查询、TCP 连接、SSL 握手、请求发送、等待响应和接收数据的时间。

5. Cookies（Cookie）：显示请求和响应中涉及的 Cookie 信息。

6. Initiator（发起者）：显示发起该请求的脚本或文件，并可以跳转到对应的源代码位置。

7.4 使用 Timing 分析性能瓶颈

在 Timing 标签页中，开发者可以查看请求的详细时间分布，从而识别性能瓶颈。生命周期按照以下类别显示花费的时间：

• Queuing（排队）：请求在浏览器队列中等待的时间。如果某个请求正在排队，则指示：

  • 　　1、请求已被渲染引擎推迟，因为该请求的优先级被视为低于关键资源（例如脚本/样式）的优先级。 图像经常发生这种情况
  • 　　2、请求已被暂停，以等待将要释放的不可用 TCP 套接字
  • 　　3、请求已被暂停，因为在 HTTP 1 上，浏览器仅允许每个源拥有六个 TCP 连接
  • 　　4、生成磁盘缓存条目所用的时间（通常非常迅速）

• Stalled（阻塞）：请求等待发送所用的时间。 可以是等待 Queueing 中介绍的任何一个原因。 此外，此时间包含代理协商所用的任何时间

• DNS Lookup（DNS 查询）：解析域名所花费的时间。

• Initial Connection（初始连接）：建立连接所用的时间，包括 TCP 握手/重试和协商 SSL 的时间。

• SSL Handshake（SSL 握手）：建立 HTTPS 连接时进行 SSL 握手所花费的时间。

• Request Sent（请求发送）：发出网络请求所用的时间。 通常不到一毫秒

• Waiting (TTFB)：等待初始响应所用的时间，也称为至第一字节的时间。 此时间将捕捉到服务器往返的延迟时间，以及等待服务器传送响应所用的时间。

• Content Download（内容下载）：下载响应内容所花费的时间。

八、Summary（摘要）详解

Summary（摘要） 是 Network 面板底部的一个信息汇总区域，用于显示当前页面加载过程中所有网络请求的总体统计信息。它提供了一个快速查看页面性能指标的入口，帮助开发者从全局角度评估页面的加载效率。

8.1 Summary 的作用

• 汇总关键指标：显示页面加载的总请求数、数据传输量和加载时间。

• 快速评估性能：通过摘要信息，开发者可以快速判断页面是否存在性能问题。

• 辅助优化决策：根据数据传输量和加载时间，制定针对性的优化策略。

8.2 Summary 的组成

Summary 区域通常显示以下关键指标：

1. Requests（请求总数）：显示页面加载过程中发出的总请求数。例如：100 requests。

2. Transferred（传输数据量）：显示所有请求的总数据传输量（包括请求头和响应体）。例如：1.5 MB transferred。

3. Resources（资源大小）：显示所有请求的资源总大小（未压缩）。例如：4.2 MB resources。

4. Finish（完成时间）：显示页面加载完成的总时间（从第一个请求开始到最后一个请求结束）。例如：2.3 s。

5. DOMContentLoaded 时间：显示 DOMContentLoaded 事件触发的时间。例如：DOMContentLoaded: 1.2 s。该事件表示 HTML 文档已完全加载和解析，无需等待样式表、图片等资源。

6. Load 时间：显示 load 事件触发的时间。例如：Load: 2.1 s。该事件表示页面所有资源（如图片、脚本等）已加载完成。

Transferred（传输数据量）和Resources（资源大小）这两个指标提供了关于页面加载过程中涉及的数据量的不同视角。

• Transferred（传输数据量）：这个数值显示的是实际从网络传输到浏览器的数据量。它考虑了压缩、缓存等因素。例如，如果某个资源通过gzip进行了压缩，那么Transferred会显示压缩后的大小，也就是实际上通过网络传输的数据量。这有助于了解实际消耗的带宽情况。

• Resources（资源大小）：这个数值表示的是所有资源未压缩时的原始大小总和。它反映了如果没有任何优化措施（如压缩、缓存等），这些资源将占用多少空间。这个值可以帮助你理解页面资源的总体积，以及评估潜在的优化空间。

DOMContentLoaded 和 Load 是两个衡量网页加载过程中的重要时间点，它们分别代表了不同的阶段和事件：

• DOMContentLoaded：这个事件会在初始的 HTML 文档完全加载并解析完成时触发，而无需等待样式表、图像和子框架的完全加载。换句话说，当浏览器已经完成了对整个 HTML 的解析，并构建好了 DOM 树（文档对象模型树），即使相关的资源（如图片、样式表等）还没有全部加载完毕，这个事件也会被触发。这通常意味着页面的主要内容已经可以访问和操作了。

• Load：这个事件会在页面完全加载后触发，包括所有的依赖资源，如样式表、脚本、图片等都已加载完毕。它是发生在所有资源都已成功获取并应用到页面上之后，标志着页面的所有资源都已经加载完成且准备就绪

8.3  Summary解析

• 请求总数：过多的请求数可能导致页面加载变慢，建议通过合并资源（如 CSS、JS 文件）或使用 HTTP/2 多路复用来优化。

• 传输数据量：较大的传输数据量可能影响页面加载速度，建议通过压缩资源（如 Gzip、Brotli）或使用缓存来减少数据传输。

• 资源大小：较大的资源大小可能增加页面加载时间，建议优化图片、视频等资源，或使用懒加载技术。

• 完成时间：较长的完成时间可能表明存在性能瓶颈，建议结合瀑布流（Waterfall）分析具体原因。

• DOMContentLoaded 和 Load 时间：这两个时间是页面性能的重要指标。较长的 DOMContentLoaded 时间可能表明 HTML 解析或脚本执行较慢；较长的 Load 时间可能表明资源加载较慢。

8.4 示例分析

假设 Summary 显示以下数据：

• Requests: 150 requests

• Transferred: 2.1 MB transferred

• Resources: 5.8 MB resources

• Finish: 3.5 s

• DOMContentLoaded: 1.8 s

• Load: 3.2 s

分析：

1. 请求数较多：150 个请求可能导致加载变慢，建议合并 CSS、JS 文件或使用 HTTP/2。

2. 传输数据量较大：2.1 MB 的传输数据量可能影响加载速度，建议启用 Gzip 压缩。

3. 资源大小较大：5.8 MB 的资源大小可能增加加载时间，建议优化图片或使用懒加载。

4. 完成时间较长：3.5 秒的加载时间可能影响用户体验，建议结合瀑布流分析具体瓶颈。

九、事件

Network 面板突出显示两种事件：DOMContentLoaded 和 load。 解析页面的初始标记时会触发 DOMContentLoaded。 此事件将在 Network 面板上的两个地方显示：

　　1、Overview 窗格中的蓝色竖线表示事件；

　　2、在 Summary 窗格中，可以看到事件的确切时间

页面完全加载时将触发 load。此事件显示在三个地方：

　　1、Overview 窗格中的红色竖线表示事件

　　2、Requests Table 中的红色竖线也表示事件

　　3、在 Summary 窗格中，可以看到事件的确切时间

十、其他

Queueing 时间过长

• 原因：在 HTTP/1.0 和 HTTP/1.1 中，每个源（域名）最多只能有六个并行TCP连接。如果一个源需要加载超过六个资源，额外的资源请求会被排队等待。
• 解决方案：
  • 对于HTTP/1.1，可以通过域分片来增加并发连接数，即通过设置多个子域名来分配资源请求。
  • 对于HTTP/2及以上版本，由于支持多路复用，单个TCP连接可以同时处理多个请求，因此不建议进行域分片。

TTFB（Time to First Byte）时间过长

• 原因：可能是由于网络条件差或服务器响应速度慢。
• 解决方案：理想情况下，TTFB应该控制在200毫秒以内。改善措施包括优化网络状况和提高服务器处理效率。

Content Download 时间过长

• 原因：下载阶段耗时长通常意味着传输的数据量过大。
• 解决方案：主要策略是减少发送的字节数，比如通过压缩资源、使用更有效的编码格式或者移除不必要的数据等手段来降低传输的数据量。