网络调试
本教程将指导你如何使用 WebDebugX 的网络调试工具分析移动设备上的网络请求。通过本教程，你将学习如何监控网络流量、分析请求性能、拦截和修改请求，以及解决常见的网络问题。
网络调试概述
Section titled “网络调试概述”WebDebugX 的网络调试工具提供了全面的网络请求分析功能，可以帮助你：
- 实时监控所有网络请求
- 分析请求和响应的详细信息
- 测量网络性能指标
- 拦截和修改请求
- 模拟不同的网络条件
- 排查网络相关的问题
提示：网络调试功能适用于所有支持的调试目标，包括 iOS Safari、iOS WebView、Android Chrome 和 Android WebView。
启动网络调试
Section titled “启动网络调试”要开始网络调试，请按照以下步骤操作：
- 连接你的移动设备到电脑
- 在 WebDebugX 中选择要调试的目标（浏览器或应用）
- 点击「网络」标签打开网络调试面板
- 确保「记录网络」选项已启用（默认启用）
网络请求列表
Section titled “网络请求列表”网络调试面板的主视图显示所有捕获的网络请求。
请求列表功能
Section titled “请求列表功能”- 请求 URL：显示请求的 URL 地址
- 方法：显示 HTTP 方法（GET、POST 等）
- 状态：显示 HTTP 状态码和状态文本
- 类型：显示资源类型（文档、脚本、样式表等）
- 大小：显示响应大小
- 时间：显示请求开始的时间
- 持续时间：显示请求完成所需的时间
你可以使用多种方式过滤网络请求列表：
- 使用搜索框按 URL、状态码或内容类型搜索
- 使用过滤器按钮筛选特定类型的请求（如 XHR、JS、CSS 等）
- 使用状态过滤器筛选特定状态的请求（如成功、失败、重定向等）
- 使用时间范围过滤器查看特定时间段的请求
- 点击列标题进行排序
- 再次点击同一列标题可以切换升序 / 降序
- 默认情况下，请求按时间排序，最新的请求显示在顶部
点击网络请求列表中的任何请求，可以查看该请求的详细信息。
- URL：完整的请求 URL
- 方法：HTTP 方法
- 状态：HTTP 状态码和状态文本
- 协议：使用的协议（HTTP/1.1、HTTP/2 等）
- 远程地址：服务器的 IP 地址和端口
- 引用页面：发起请求的页面 URL
- 所有请求头以键值对的形式显示
- 可以查看原始格式或格式化后的格式
- 可以复制单个头信息或所有头信息
对于 POST、PUT 等带有请求体的请求，可以查看请求体内容：
- 根据内容类型自动格式化（如 JSON、表单数据等）
- 可以查看原始格式或格式化后的格式
- 可以复制请求体内容
- 状态：HTTP 状态码和状态文本
- 头信息：所有响应头
- 内容：响应体内容，根据内容类型格式化
- 大小：响应大小（压缩和未压缩）
- 时间：响应时间信息
查看请求的详细时间分解：
- 排队：请求在队列中等待的时间
- 阻塞：请求被阻塞的时间（如等待连接）
- DNS 查找：DNS 解析所需的时间
- 连接：建立连接所需的时间
- TLS 协商：TLS 握手所需的时间（仅 HTTPS）
- 发送：发送请求数据所需的时间
- 等待：等待服务器响应所需的时间
- 接收：接收响应数据所需的时间
- 总时间：从开始到结束的总时间
网络性能分析
Section titled “网络性能分析”- 总请求数：页面加载期间的总请求数
- 总传输大小：所有请求的总大小
- 平均响应时间：所有请求的平均响应时间
- 最大响应时间：最慢请求的响应时间
- 请求类型分布：不同类型请求的分布情况
使用瀑布图可视化请求的时间线：
- 在请求列表上方，切换到「瀑布图」视图
- 瀑布图显示每个请求的时间线和各个阶段
- 不同颜色表示不同的阶段（如 DNS 查找、连接、等待等）
- 可以直观地看到请求之间的依赖关系和并行情况
- 在请求列表上方，点击「性能建议」按钮
- 查看针对当前网络活动的性能建议
- 建议可能包括：启用压缩、合并资源、使用 CDN 等
- 点击建议可以查看详细的解释和实现方法
请求拦截和修改
Section titled “请求拦截和修改”WebDebugX 允许你拦截和修改网络请求，这对于测试和调试非常有用。
启用请求拦截
Section titled “启用请求拦截”- 在调试界面中，点击「更多工具」（三个点）
- 选择「请求拦截」
- 启用「拦截请求」选项
- 添加拦截规则（URL 模式、请求方法、内容类型等）
- 当请求被拦截时，WebDebugX 会暂停请求
- 你可以修改请求头、请求体或 URL
- 点击「继续」按钮发送修改后的请求
- 点击「阻止」按钮阻止请求
不发送实际请求，直接返回模拟响应：
- 在请求拦截设置中，选择「模拟响应」
- 设置响应状态码、头信息和响应体
- 当匹配的请求发生时，WebDebugX 将返回模拟响应
- 这对于测试错误处理或离线功能非常有用
网络条件模拟
Section titled “网络条件模拟”WebDebugX 允许你模拟不同的网络条件，测试应用在各种网络环境下的表现。
预设网络条件
Section titled “预设网络条件”- 在调试界面中，点击「网络」面板中的「网络节流」下拉菜单
- 选择预设的网络条件（如「离线」「2G」「3G」「4G」等）
- WebDebugX 将模拟所选网络条件的带宽和延迟
- 刷新页面或重新加载应用，观察在网络限制下的行为
自定义网络条件
Section titled “自定义网络条件”创建自定义的网络条件：
- 在「网络节流」下拉菜单中，选择「自定义」
- 设置下载速度、上传速度和延迟（round-trip time）
- 为该配置命名并保存，它会出现在节流下拉菜单中供以后复用
- 刷新页面，观察页面在该网络条件下的加载行为
提示：弱网问题往往只在首屏出现。模拟弱网后配合性能分析一起看，更容易定位到具体是哪个资源拖慢了首屏。
选择「离线」可以完全切断页面的网络访问，用于验证：
- 离线缓存（Service Worker、AppCache）是否按预期生效
- 请求失败时的错误提示和重试逻辑是否正确
- 页面在断网后恢复联网时能否自动重连