这是一个实操教程，介绍了与检查页面网络活动相关的一些最常用的开发者工具功能。
如果您要改为浏览功能，请参阅网络参考。
请继续阅读或观看本教程的视频版本：
何时使用“网络”面板
一般来说，如果您需要确保按预期下载或上传资源，请使用“网络”面板。Network 面板最常见的用例包括：
- 确保确实正在上传或下载资源。
- 检查单个资源的属性，例如其 HTTP 标头、内容、大小等。
如果您要寻找提高网页加载性能的方法，请不要从“Network”面板开始， 加载性能问题有很多与网络活动无关的问题。从 Lighthouse 面板入手，因为它可以为您提供有关如何改进网页的针对性建议。请参阅优化网站速度。
打开“网络”面板
要充分利用本教程，请打开演示并试用演示页面上的功能。
打开使用入门演示。
图 1. 演示
您可能希望将演示移至单独的窗口。
图 2. 在一个窗口中显示演示，在另一个窗口中显示本教程
按 Ctrl+Shift+J 或 Command+Option+J (Mac) 打开开发者工具。控制台面板随即打开。
图 3. 控制台
您可能更希望将开发者工具停靠在窗口底部。
图 4. 开发者工具停靠在窗口底部
点击 Network 标签。系统会打开“网络”面板。
图 5. 开发者工具停靠在窗口底部
现在，“网络”面板是空的。这是因为开发者工具在打开时仅记录网络活动，而自您打开开发者工具后没有发生任何网络活动。
记录网络活动
要查看网页引起的网络活动，请执行以下操作：
重新加载页面。 “网络”面板会在网络日志中记录所有网络活动。
图 6. 网络日志
网络日志的每一行代表一项资源。默认情况下，资源按时间顺序列出。最高级资源通常是主 HTML 文档。底部资源是最后请求的资源。
每一列代表一项资源的相关信息。图 6 显示了默认列：
- 状态。HTTP 响应代码。
- 类型。资源类型。
- Initiator：导致资源请求的原因。点击“Initiator”列中的链接，即可前往导致相应请求的源代码。
- 时间。请求用了多长时间。
- 广告瀑布流。请求不同阶段的图示。将鼠标悬停在瀑布上即可查看细分数据。
只要您打开开发者工具，它就会在网络日志中记录网络活动。为了演示这一点，请首先查看 Network Log 底部，并记住上次的 activity。
现在，点击演示中的 Get Data 按钮。
再次查看网络日志底部。有一个名为
getstarted.json的新资源。点击获取数据按钮会导致相应网页请求此文件。
图 7. 网络日志中的新资源
显示更多信息
网络日志的列可配置。您可以隐藏不使用的列。此外，还有许多默认隐藏的列，这对您可能很有用。
右键点击“网络日志”表的标题，然后选择网域。系统随即会显示每个资源的网域
图 8. 启用“网域”列
模拟较慢的网络连接
您用于构建网站的计算机的网络连接速度可能比您用户的移动设备的网络连接快。通过限制网页，您可以更好地了解网页在移动设备上加载所需的时间。
点击限制下拉菜单，其默认设置为在线。
图 9. 启用节流功能
选择 Slow 3G。
图 10. 选择慢速 3G
长按重新加载
，然后选择清空缓存并硬重新加载。
图 11. 清空缓存并硬性重新加载
在重复访问时，浏览器通常会从其缓存中提供一些文件，这会加快页面加载速度。清空缓存和硬重新加载会强制浏览器连接到网络以获取所有资源。如果您想了解初访者的网页加载体验，这会非常有用。
截取屏幕截图
屏幕截图可让您查看网页加载期间网页在一段时间内的显示效果。
- 点击 Capture Screenshots 图标
。 通过清空缓存并硬性重新加载工作流程再次重新加载页面。如果您需要有关如何执行此操作的提醒，请参阅模拟更慢的连接。“屏幕截图”窗格提供了网页在加载过程中各个时间点的缩略图。
图 12. 网页加载的屏幕截图
点击第一个缩略图。开发者工具会显示当时正在发生的网络活动。
图 13. 在第一个屏幕截图期间发生的网络活动
再次点击 Capture Screenshots
以关闭 Screenshots 窗格。再次重新加载页面。
检查资源的详细信息
点击资源可详细了解相关信息。立即试用：
点击
getstarted.html。 系统随即会显示 Headers 标签页。使用此标签页检查 HTTP 标头。
图 14. “Headers”标签页
点击预览标签页。显示的是 HTML 的基本呈现方式。
图 15. “预览”标签
当 API 以 HTML 形式返回错误代码，并且所呈现的 HTML 比 HTML 源代码更易于阅读时，或者检查图片时，此标签页非常有用。
点击响应标签页。HTML 源代码已显示。
图 16. “响应”标签页
点击计时标签页。系统显示了此资源的网络活动细分。
图 17. “计时”标签页
点击关闭
可再次查看网络日志。
图 18. “关闭”按钮
搜索网络标头和响应
如果需要在特定字符串或正则表达式中搜索所有资源的 HTTP 标头和响应，请使用搜索窗格。
例如，假设您想要检查资源是否使用了合理的缓存政策。
点击搜索图标
。“搜索”窗格会在网络日志的左侧打开。
图 19. “Search”窗格
输入
Cache-Control，然后按 Enter 键。“搜索”窗格会列出它在资源标头或内容中找到的所有Cache-Control实例。
图 20. 与“
Cache-Control”相符的搜索结果点击某个结果即可查看。如果系统在标头中找到该查询，则会打开“Headers”标签页。如果系统在内容中发现了查询，则会打开“响应”标签页。
图 21. “Headers”（标题）标签页中突出显示的搜索结果
关闭“搜索”窗格和“计时”标签页。
图 22. “关闭”按钮
过滤资源
开发者工具提供了许多工作流来过滤掉与当前任务无关的资源。
图 23. “过滤器”工具栏
默认情况下，过滤条件工具栏应处于启用状态。如果不是：
- 点击 Filter
即可显示。
按字符串、正则表达式或属性过滤
过滤条件文本框支持许多不同类型的过滤。
在 Filter 文本框中输入
png。系统将仅显示包含文本png的文件。在这种情况下，只有 PNG 图片与过滤器匹配。
图 24. 字符串过滤条件
输入
/.*\.[cj]s+$/。开发者工具会过滤掉文件名不以j或c后跟 1 个或多个s字符结尾的所有资源。
图 25. 正则表达式过滤器
输入
-main.css。开发者工具会滤除main.css。如果任何其他文件与该格式匹配，它们也会被过滤掉。
图 26. 排除性过滤条件
在 Filter 文本框中输入
domain:raw.githubusercontent.com。开发者工具会过滤掉网址与此网域不匹配的所有资源。
图 27. 属性过滤条件
如需查看可过滤属性的完整列表，请参阅按资源过滤请求。
清除任何文本的 Filter 文本框。
按资源类型过滤
要重点关注特定类型的文件（例如样式表），请执行以下操作：
点击 CSS。所有其他文件类型都会被滤除。
图 28. 仅显示 CSS 文件
如果您还想查看脚本，请按住 Control 键或 Command 键 (Mac)，然后点击 JS。
图 29. 仅显示 CSS 和 JS 文件
点击全部以移除过滤条件并再次查看所有资源。
如需了解其他过滤工作流，请参阅过滤请求。
屏蔽请求
当网页的部分资源不可用时，网页的外观和行为会如何？是完全失败，还是仍能正常运行？屏蔽请求即可了解以下信息：
按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单。
图 30. 命令菜单
输入
block，选择显示请求屏蔽，然后按 Enter 键。
图 31. 显示请求屏蔽
点击 Add Pattern 图标
。输入
main.css。
图 32. 正在屏蔽
main.css点击添加。
重新加载页面。 不出所料，网页的样式有点混乱，因为其主样式表已被屏蔽。注意网络日志中的
main.css行。红色文字表示资源已被屏蔽
图 33. 已屏蔽
main.css取消选中启用请求屏蔽功能复选框。
后续步骤
恭喜，您已学完教程。点击支出奖金即可领取奖品。
如需了解更多与检查网络活动相关的开发者工具功能，请查看网络参考。