网络调试

本教程将指导您如何使用WebDebugX的网络调试工具分析移动设备上的网络请求。通过本教程，您将学习如何监控网络流量、分析请求性能、拦截和修改请求，以及解决常见的网络问题。

网络调试概述

WebDebugX的网络调试工具提供了全面的网络请求分析功能，可以帮助您：

  • 实时监控所有网络请求
  • 分析请求和响应的详细信息
  • 测量网络性能指标
  • 拦截和修改请求
  • 模拟不同的网络条件
  • 排查网络相关的问题

提示：网络调试功能适用于所有支持的调试目标，包括iOS Safari、iOS WebView、Android Chrome和Android WebView。

启动网络调试

要开始网络调试，请按照以下步骤操作：

  1. 连接您的移动设备到电脑
  2. 在WebDebugX中选择要调试的目标（浏览器或应用）
  3. 点击"网络"标签打开网络调试面板
  4. 确保"记录网络"选项已启用（默认启用）

网络请求列表

网络调试面板的主视图显示所有捕获的网络请求：

请求列表功能

  • 请求URL：显示请求的URL地址
  • 方法：显示HTTP方法（GET、POST等）
  • 状态：显示HTTP状态码和状态文本
  • 类型：显示资源类型（文档、脚本、样式表等）
  • 大小：显示响应大小
  • 时间：显示请求开始的时间
  • 持续时间：显示请求完成所需的时间

过滤请求

您可以使用多种方式过滤网络请求列表：

  1. 使用搜索框按URL、状态码或内容类型搜索
  2. 使用过滤器按钮筛选特定类型的请求（如XHR、JS、CSS等）
  3. 使用状态过滤器筛选特定状态的请求（如成功、失败、重定向等）
  4. 使用时间范围过滤器查看特定时间段的请求

排序请求

您可以按照不同的列对请求进行排序：

  1. 点击列标题进行排序
  2. 再次点击同一列标题可以切换升序/降序
  3. 默认情况下，请求按时间排序，最新的请求显示在顶部

请求详情

点击网络请求列表中的任何请求，可以查看该请求的详细信息：

请求信息

查看请求的详细信息：

  • URL：完整的请求URL
  • 方法：HTTP方法
  • 状态：HTTP状态码和状态文本
  • 协议：使用的协议（HTTP/1.1、HTTP/2等）
  • 远程地址：服务器的IP地址和端口
  • 引用页面：发起请求的页面URL

请求头

查看请求的HTTP头信息：

  • 所有请求头以键值对的形式显示
  • 可以查看原始格式或格式化后的格式
  • 可以复制单个头信息或所有头信息

请求体

对于POST、PUT等带有请求体的请求，可以查看请求体内容：

  • 根据内容类型自动格式化（如JSON、表单数据等）
  • 可以查看原始格式或格式化后的格式
  • 可以复制请求体内容

响应信息

查看响应的详细信息：

  • 状态：HTTP状态码和状态文本
  • 头信息：所有响应头
  • 内容：响应体内容，根据内容类型格式化
  • 大小：响应大小（压缩和未压缩）
  • 时间：响应时间信息

时间信息

查看请求的详细时间信息：

  • 排队：请求在队列中等待的时间
  • 阻塞：请求被阻塞的时间（如等待连接）
  • DNS查找：DNS解析所需的时间
  • 连接：建立连接所需的时间
  • TLS协商：TLS握手所需的时间（仅HTTPS）
  • 发送：发送请求数据所需的时间
  • 等待：等待服务器响应所需的时间
  • 接收：接收响应数据所需的时间
  • 总时间：从开始到结束的总时间

网络性能分析

WebDebugX提供了强大的网络性能分析工具，帮助您优化应用的网络性能：

性能指标

查看关键的网络性能指标：

  • 总请求数：页面加载期间的总请求数
  • 总传输大小：所有请求的总大小
  • 平均响应时间：所有请求的平均响应时间
  • 最大响应时间：最慢请求的响应时间
  • 请求类型分布：不同类型请求的分布情况

瀑布图

使用瀑布图可视化请求的时间线：

  1. 在请求列表上方，切换到"瀑布图"视图
  2. 瀑布图显示每个请求的时间线和各个阶段
  3. 不同颜色表示不同的阶段（如DNS查找、连接、等待等）
  4. 可以直观地看到请求之间的依赖关系和并行情况

性能建议

WebDebugX会自动分析网络性能并提供优化建议：

  1. 在请求列表上方，点击"性能建议"按钮
  2. 查看针对当前网络活动的性能建议
  3. 建议可能包括：启用压缩、合并资源、使用CDN等
  4. 点击建议可以查看详细的解释和实现方法

请求拦截和修改

WebDebugX允许您拦截和修改网络请求，这对于测试和调试非常有用：

启用请求拦截

设置请求拦截规则：

  1. 在调试界面中，点击"更多工具"（三个点）
  2. 选择"请求拦截"
  3. 启用"拦截请求"选项
  4. 添加拦截规则（URL模式、请求方法、内容类型等）

修改请求

拦截并修改请求：

  1. 当请求被拦截时，WebDebugX会暂停请求
  2. 您可以修改请求头、请求体或URL
  3. 点击"继续"按钮发送修改后的请求
  4. 点击"阻止"按钮阻止请求

模拟响应

不发送实际请求，直接返回模拟响应：

  1. 在请求拦截设置中，选择"模拟响应"
  2. 设置响应状态码、头信息和响应体
  3. 当匹配的请求发生时，WebDebugX将返回模拟响应
  4. 这对于测试错误处理或离线功能非常有用

网络条件模拟

WebDebugX允许您模拟不同的网络条件，测试应用在各种网络环境下的表现：

预设网络条件

使用预设的网络条件：

  1. 在调试界面中，点击"网络"面板中的"网络节流"下拉菜单
  2. 选择预设的网络条件（如"离线"、“2G”、“3G”、“4G"等）
  3. WebDebugX将模拟所选网络条件的带宽和延迟
  4. 刷新页面或重新加载应用，观察在网络限制下的行为

自定义网络条件

创建自定义的网络条件：

  1. 在"网络节流"下拉菜单中，选择"自定义”