“网络”面板：分析网络负载和资源

Dale St. Marthe
Dale St. Marthe
LinkedIn

使用网络 面板分析网页加载情况并检查网络资源。

概览

借助网络 面板，您可以：

如需观看探索一些最常用的网络面板功能的引导式教程，请参阅检查网络活动。

打开“网络”面板

如需打开网络 面板，请打开开发者工具，然后点击顶部操作栏中的网络 。

或者，如需通过命令菜单 打开网络 面板，请按以下步骤操作：

  1. 打开开发者工具。
  2. 按以下键打开命令菜单 ：
  3. macOS：Command+Shift+P
  4. Windows、Linux、ChromeOS：Control+Shift+P 包含以下内容的命令菜单
  5. 开始输入 Network，选择 显示“网络”面板，然后按 Enter。

记录网络活动

打开开发者工具后，只要开发者工具处于打开状态，系统就会自动在网络面板中记录网络请求。

除了记录之外，您还可以执行以下操作：

检查网络请求

所有网络请求都会记录在面板中央的请求 表格中。

如需详细了解默认显示的列以及您可以添加的其他列，请参阅查看请求日志。

点击请求的名称，即可查看包含有关该请求的其他信息的标签页，包括：

  • 标头：所选请求的 HTTP 标头。
  • **载荷** ：请求的查询字符串参数和表单数据。
  • 预览：HTML 的基本呈现。
  • 响应：请求的 HTML 源代码。
  • 启动器：导致请求的原因。
  • **时间**：所选请求的网络活动细分。
  • Cookie ：请求及其响应的 Cookie。
  • 设备绑定会话：有效设备绑定会话的延迟和刷新状态。

过滤和排序网络请求

借助网络 面板，您可以通过两种方式对请求 表格中的请求进行排序：

您可以通过以下几种方式过滤请求 表格中的请求：

如需了解如何搜索所有资源的 HTTP 标头和响应以查找特定字符串或正则表达式，请参阅搜索网络标头和响应。

更改加载行为

通过在网络 面板中更改加载行为，测试网页的用户体验。

借助网络 面板，您可以执行以下操作：

保存和导出网络请求数据

如需保存和导出网络请求数据，请参阅以下内容：