使用网络面板分析网页加载情况并检查网络资源。
概览
借助网络面板,您可以:
- 记录网络活动
- 检查网络请求
- 过滤和排序网络请求
- 搜索网络标头和响应
- 更改加载行为
- 屏蔽网络请求
- 更改网络状况
- 调试
prefetch
推测规则 - 覆盖 HTTP 响应标头
- 使用通配符替换多个网址的标头。
- 保存和导出网络请求数据
如需查看有关探索一些最常用的 Network 面板功能的引导式教程,请参阅检查网络活动。
打开“网络”面板
如需打开 Network 面板,请打开 DevTools,然后点击顶部操作栏中的 Network。
或者,如需通过命令菜单打开网络面板,请按以下步骤操作:
- 打开开发者工具。
- 按以下任一键打开命令菜单:
- macOS:Command+Shift+P
- Windows、Linux、ChromeOS:Ctrl+Shift+P
- 开始输入
Network
,选择 Show Network panel,然后按 Enter 键。
记录网络活动
当您打开开发者工具后,只要开发者工具处于打开状态,系统就会在网络面板中自动记录网络请求。
除了录制之外,您还可以执行以下操作:
检查网络请求
所有网络请求都会记录在面板中心的请求表中。
如需详细了解默认显示的列以及您可以添加的其他列,请参阅查看请求日志。
点击相应请求的名称,即可查看包含有关该请求的其他信息的标签页,包括:
- 标头:所选资源的 HTTP 标头。
- 载荷:请求的查询字符串参数和表单数据。
- 预览:HTML 的基本呈现。
- 响应:所选资源的 HTML 源代码。
- 发起者:导致请求资源的原因。
- 时间:所选资源的广告联盟活动明细。
- Cookie:请求及其响应的 Cookie。
过滤和排序网络请求
在网络面板中,您可以通过以下两种方式对请求表中的请求进行排序:
以下是过滤请求表格中请求的几种方法:
搜索网络标头和响应
如需了解如何在所有资源的 HTTP 标头和响应中搜索特定字符串或正则表达式,请参阅搜索网络标头和响应。
更改加载行为
通过在网络面板中更改加载行为,测试网页的用户体验。
您可以使用网络面板执行以下操作:
保存和导出网络请求数据
如需保存和导出网络请求数据,请参阅以下内容: