网络调试

Name: 网络调试
Rating: 5 (1 reviews)

概述

网络调试识别连接问题、延迟问题和数据传输错误，这些问题影响应用性能。

何时使用

页面加载慢
请求失败
间歇性连接
CORS错误
SSL/TLS问题
API通信问题

指南

1. 浏览器网络工具

Chrome DevTools 网络标签页：

列：
  - 名称：请求文件/端点
  - 状态：HTTP状态码
  - 类型：资源类型（xhr、fetch等）
  - 发起者：触发请求的原因
  - 大小：资源大小/传输大小
  - 时间：完成所需的总时间
  - 水落图：时间线可视化

时间线分解：
  - 排队：在队列中等待
  - DNS：域名解析
  - 初始连接：TCP握手
  - SSL：SSL/TLS协商
  - 请求发送：发送请求的时间
  - 等待（TTFB）：第一个字节的时间
  - 内容下载：接收响应

---

网络条件：

节流预设：
  - 快速3G：下载1.6 Mbps，上传750 Kbps
  - 慢速3G：下载400 Kbps，上传400 Kbps
  - 离线：无网络连接

自定义设置：
  - 模拟真实网络速度
  - 测试移动性能
  - 识别瓶颈
  - 验证错误处理

---

请求分析：

头部：
  - 请求头部（浏览器发送的）
  - 响应头部（服务器响应）
  - Cookies（会话数据）
  - 授权（令牌）

预览：
  - JSON格式化视图
  - 响应数据检查
  - 突出显示解析错误

响应：
  - 完整的响应体
  - 原始与格式化视图
  - 文件下载选项

时间：
  - 详细的时间分解
  - 识别慢速组件
  - DNS查找时间
  - 连接建立

2. 常见网络问题

问题：CORS错误

错误："没有'Access-Control-Allow-Origin'头部"

解决方案：
  1. 检查服务器CORS头部
  2. 验证允许的来源
  3. 检查请求方法（GET、POST等）
  4. 添加预检处理
  5. 先用curl测试

服务器配置（Node.js）：
  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
  });

---

问题：慢速DNS解析

症状：DNS查找时间长（>100ms）

解决方案：
  1. 使用更快的DNS（8.8.8.8，1.1.1.1）
  2. 预连接到域名：<link rel="preconnect" href="https://api.example.com">
  3. DNS预获取：<link rel="dns-prefetch" href="https://cdn.example.com">
  4. 检查DNS提供商
  5. 实施DNS缓存

---

问题：SSL证书错误

错误："SSL_ERROR_RX_RECORD_TOO_LONG"

调试：
  curl -v https://example.com
  openssl s_client -connect example.com:443
  检查证书有效性
  检查证书链
  验证主机名匹配

解决方案：
  1. 续订证书
  2. 修复证书链
  3. 验证主机名
  4. 检查服务器配置

---

问题：超时错误

症状：请求挂起，然后超时后失败

分析：
  1. 在DevTools中增加超时
  2. 检查服务器响应
  3. 验证网络连接
  4. 检查防火墙规则
  5. 查看服务器日志

---

问题：请求失败（5xx错误）

诊断：
  1. 查看服务器日志
  2. 验证请求数据
  3. 检查服务器资源
  4. 查看最近更改
  5. 检查数据库连接

响应：
  1. 实施重试逻辑
  2. 后备机制
  3. 错误通知
  4. 优雅降级

3. 调试工具与技术

工具：

curl：
  curl -v https://api.example.com
  curl -H "Authorization: Bearer token" https://api.example.com
  curl -X POST -d '{"key": "value"}' https://api.example.com

Postman：
  - GUI请求测试
  - 请求集合
  - 环境变量
  - 请求前后脚本
  - 模拟服务器

网络检查器：
  - 浏览器DevTools网络标签页
  - 实际请求/响应查看
  - 请求过滤
  - 时间分析

流量分析：
  - Charles代理（HTTP/HTTPS）
  - Fiddler
  - Wireshark（数据包级别）
  - tcpdump

---

分析步骤：

1. 重现问题
  - 清除缓存
  - 禁用插件
  - 禁用扩展
  - 尝试隐身模式

2. 捕获流量
  - 打开网络标签页
  - 清除当前请求
  - 执行操作
  - 观察请求

3. 分析请求
  - 检查状态码
  - 查看头部
  - 检查负载
  - 检查响应时间

4. 识别模式
  - 失败请求模式
  - 时间相关性
  - 特定条件
  - 数据大小影响

5. 测试修复
  - 进行更改
  - 清除缓存
  - 重现
  - 验证修复

4. 检查清单

网络调试清单：

连接：
  [ ] 验证互联网连接
  [ ] 防火墙允许连接
  [ ] VPN不阻塞
  [ ] 如有需要配置代理
  [ ] DNS解析正确

请求：
  [ ] 正确的URL
  [ ] 正确的HTTP方法
  [ ] 所需的头部存在
  [ ] 授权正确
  [ ] 请求体有效

响应：
  [ ] 预期的状态码
  [ ] 响应头部正确
  [ ] 适当的Content-Type
  [ ] 响应体有效
  [ ] 无解析错误

性能：
  [ ] DNS查找<50ms
  [ ] 连接<100ms
  [ ] TTFB<500ms
  [ ] 下载合理
  [ ] 总时间可接受

监控：
  [ ] 启用错误日志
  [ ] 跟踪网络指标
  [ ] 配置警报
  [ ] 建立基线

要点

使用网络标签页进行请求分析
首先检查状态码和头部
模拟网络条件进行测试
在调试之前先用curl测试CORS
监控DNS和TLS时间
实施重试逻辑以提高可靠性
使用适当的超时
记录请求以进行调试
在慢速网络上测试
验证错误处理