【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 输入框（过滤请求）

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

• 语法示例&#