网络调试利器：Chrome Network 工具的详细指南

前言

作为测试工程师，熟练使用 Chrome 开发者工具中的 Network 工具可以极大地提升我们调试和分析 Web 应用的能力。Network 工具用于监视网络活动，包括 HTTP 请求、响应、资源加载时间和数据传输量等。本文将详细介绍如何使用这个强大的工具来进行网络分析和调试。

获取更多技术资料，请点击！

打开 Network 工具

1. 打开 Chrome 浏览器并导航到你要测试的网页。

2. 右键点击页面，然后选择“检查”（Inspect），或者按下快捷键 Ctrl+Shift+I（Windows）或 Cmd+Option+I（Mac）。

3. 在开发者工具中，选择顶部菜单栏中的“Network”选项卡。

Network 工具界面概述

Network 工具界面分为几个主要部分：

• 过滤器栏：用于过滤显示的请求，可以根据不同条件（如类型、方法、状态码等）筛选。

• 请求列表：显示所有捕获的网络请求，包括请求的 URL、方法、状态码、类型、时间等。

• 请求详情：点击某个请求后，会在下方显示详细信息，包括 Headers、Preview、Response、Cookies、Timing 等。

使用过滤器

过滤器栏提供了多种过滤选项，帮助你快速找到特定的网络请求：

• 文本过滤：输入 URL 的一部分来过滤请求。

• 类型过滤：通过单击“JS”、“CSS”、“XHR”等按钮，只显示特定类型的请求。

• 其他过滤条件：点击过滤器栏右侧的“Filter”按钮，可以按方法、状态码、域名等条件进行过滤。

分析请求和响应

点击请求列表中的某个请求，会在下方显示详细信息，主要分为以下几部分：

Headers

“Headers”选项卡显示请求和响应的头信息，包括：

• General：显示请求的基本信息，如请求 URL、方法、状态码等。

• Request Headers：显示客户端发送的请求头。

• Response Headers：显示服务器返回的响应头。

Preview

“Preview”选项卡用于预览服务器返回的响应数据，尤其适用于查看 JSON、HTML 或图片等格式的数据。

Response

“Response”选项卡显示原始响应数据，可以用于查看服务器返回的纯文本内容。

Cookies

“Cookies”选项卡显示与请求相关的所有 Cookies，包括发送和接收的 Cookies。

Timing

“Timing”选项卡显示请求的时间分布，包括 DNS 查找时间、连接时间、请求发送时间、等待时间和响应接收时间。通过分析这些时间，可以帮助你识别网络性能瓶颈。

网络性能分析

Network 工具不仅能分析单个请求，还能帮助你整体评估网页的网络性能：

瀑布流图

请求列表上方的时间轴显示了所有请求的瀑布流图，每个条目表示一个请求的加载过程，包括开始时间和持续时间。通过瀑布流图，可以直观地看到资源加载的顺序和并行情况。

性能指标

Network 工具可以计算和显示一些关键的性能指标，如页面加载时间、DOMContentLoaded 时间和首次内容绘制时间。这些指标对于评估网页性能非常重要。

模拟网络环境

你可以使用 Network 工具模拟不同的网络环境，测试网页在不同带宽和延迟下的表现：

1. 点击 Network 工具右上角的“在线”（Online）按钮。

2. 选择预定义的网络条件（如“Slow 3G”）或创建自定义的网络配置。

保存和导出网络日志

可以将捕获的网络请求保存为 HAR 文件，以便稍后分析或与他人分享：

1. 右键点击请求列表中的任意位置。

2. 选择“保存所有为 HAR 文件”（Save all as HAR with content）。

保存的 HAR 文件可以使用其他工具或再次加载到 Network 工具中进行分析。

总结

Chrome 开发者工具中的 Network 工具是一个强大且灵活的工具，能帮助测试工程师深入了解和调试 Web 应用的网络活动。通过掌握过滤请求、分析请求和响应、评估性能以及模拟网络环境等技能，你可以更加高效地进行网络调试和性能优化。