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