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

Dale St. Marthe
Dale St. Marthe

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

概览

借助网络面板,您可以:

请参阅检查网络活动,其中包含一个引导式教程,可帮助您探索一些最常用的网络面板功能。

打开“网络”面板

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

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

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

记录网络活动

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

除了录制之外,您还可以执行以下操作:

检查网络请求

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

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

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

  • 标头:所选资源的 HTTP 标头。
  • 载荷:请求的查询字符串参数和表单数据。
  • 预览:HTML 的基本呈现效果。
  • 响应:所选资源的 HTML 源代码。
  • 启动器:导致请求资源的原因。
  • 时间:所选资源的网络活动细分。
  • Cookie:请求及其响应的 Cookie。

过滤和排序网络请求

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

以下是过滤请求表中的请求的几种方法:

如需了解如何搜索所有资源中包含特定字符串或正则表达式的 HTTP 标头和响应,请参阅搜索网络标头和响应

更改加载行为

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

您可以使用网络面板执行以下操作:

保存并导出网络请求数据

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