network-debugging

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Network Debugging

网络调试

Overview

概述

Network debugging identifies connectivity issues, latency problems, and data transmission errors that impact application performance.

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

When to Use

适用场景

Slow loading times
Failed requests
Intermittent connectivity
CORS errors
SSL/TLS issues
API communication problems

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

Instructions

操作步骤

1. Browser Network Tools

1. 浏览器网络工具

yaml

Chrome DevTools Network Tab:

Columns:
  - Name: Request file/endpoint
  - Status: HTTP status code
  - Type: Resource type (xhr, fetch, etc)
  - Initiator: What triggered request
  - Size: Resource size / transferred size
  - Time: Total time to complete
  - Waterfall: Timeline visualization

Timeline Breakdown:
  - Queueing: Waiting in queue
  - DNS: Domain name resolution
  - Initial connection: TCP handshake
  - SSL: SSL/TLS negotiation
  - Request sent: Time to send request
  - Waiting (TTFB): Time to first byte
  - Content Download: Receiving response

---

Network Conditions:

Throttling Presets:
  - Fast 3G: 1.6 Mbps down, 750 Kbps up
  - Slow 3G: 400 Kbps down, 400 Kbps up
  - Offline: No network connection

Custom Settings:
  - Simulate real network speeds
  - Test mobile performance
  - Identify bottlenecks
  - Verify error handling

---

Request Analysis:

Headers:
  - Request headers (what browser sent)
  - Response headers (server response)
  - Cookies (session data)
  - Authorization (tokens)

Preview:
  - JSON formatted view
  - Response data inspection
  - Parse errors highlighted

Response:
  - Full response body
  - Raw vs formatted view
  - File download option

Timing:
  - Detailed timing breakdown
  - Identify slow components
  - DNS lookup time
  - Connection establishment

yaml

Chrome DevTools Network Tab:

列:
  - 名称: 请求文件/端点
  - 状态: HTTP状态码
  - 类型: 资源类型（xhr、fetch等）
  - 触发源: 触发请求的对象
  - 大小: 资源大小 / 传输大小
  - 时长: 完成总时长
  - 瀑布流: 时间线可视化

时间线细分:
  - 排队: 等待进入队列
  - DNS: 域名解析
  - 初始连接: TCP握手
  - SSL: SSL/TLS协商
  - 请求发送: 发送请求的时间
  - 等待(TTFB): 首字节响应时间
  - 内容下载: 接收响应内容

---

网络条件:

节流预设:
  - Fast 3G: 下行1.6 Mbps，上行750 Kbps
  - Slow 3G: 下行400 Kbps，上行400 Kbps
  - 离线: 无网络连接

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

---

请求分析:

请求头:
  - Request headers: 浏览器发送的请求头
  - Response headers: 服务器响应头
  - Cookies: 会话数据
  - Authorization: 令牌

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

响应:
  - 完整响应体
  - 原始视图 vs 格式化视图
  - 文件下载选项

计时:
  - 详细时间细分
  - 识别缓慢组件
  - DNS查询时长
  - 连接建立时长

2. Common Network Issues

2. 常见网络问题

yaml

Issue: CORS Error

Error: "No 'Access-Control-Allow-Origin' header"

Solution:
  1. Check server CORS headers
  2. Verify allowed origins
  3. Check request method (GET, POST, etc)
  4. Add preflight handling
  5. Test with curl first

Server Configuration (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();
  });

---

Issue: Slow DNS Resolution

Symptoms: Long DNS lookup time (>100ms)

Solutions:
  1. Use faster DNS (8.8.8.8, 1.1.1.1)
  2. Pre-connect to domain: <link rel="preconnect" href="https://api.example.com">
  3. DNS prefetch: <link rel="dns-prefetch" href="https://cdn.example.com">
  4. Check DNS provider
  5. Implement DNS caching

---

Issue: SSL Certificate Error

Error: "SSL_ERROR_RX_RECORD_TOO_LONG"

Debug:
  curl -v https://example.com
  openssl s_client -connect example.com:443
  Check certificate validity
  Check certificate chain
  Verify hostname matches

Solutions:
  1. Renew certificate
  2. Fix certificate chain
  3. Verify hostname
  4. Check server configuration

---

Issue: Timeout Errors

Symptoms: Requests hang, then fail after timeout

Analysis:
  1. Increase timeout in DevTools
  2. Check server response
  3. Verify network connectivity
  4. Check firewall rules
  5. Review server logs

---

Issue: Failed Requests (5xx errors)

Diagnosis:
  1. Check server logs
  2. Verify request data
  3. Check server resources
  4. Review recent changes
  5. Check database connectivity

Response:
  1. Implement retry logic
  2. Fallback mechanism
  3. Error notifications
  4. Graceful degradation

yaml

问题: CORS错误

错误信息: "No 'Access-Control-Allow-Origin' header"

解决方案:
  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. Debugging Tools & Techniques

3. 调试工具与技巧

yaml

Tools:

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 for request testing
  - Collection of requests
  - Environment variables
  - Pre/post request scripts
  - Mock servers

Network Inspector:
  - Browser DevTools Network tab
  - Real request/response viewing
  - Request filtering
  - Timing analysis

Traffic Analysis:
  - Charles Proxy (HTTP/HTTPS)
  - Fiddler
  - Wireshark (packet level)
  - tcpdump

---

Analysis Steps:

1. Reproduce Issue
  - Clear cache
  - Disable plugins
  - Disable extensions
  - Try incognito mode

2. Capture Traffic
  - Open Network tab
  - Clear current requests
  - Perform action
  - Observe requests

3. Analyze Requests
  - Check status codes
  - Review headers
  - Inspect payload
  - Check response time

4. Identify Pattern
  - Failed request pattern
  - Timing correlation
  - Specific conditions
  - Data size impact

5. Test Fix
  - Make change
  - Clear cache
  - Reproduce
  - Verify fix

yaml

工具:

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 Proxy(HTTP/HTTPS)
  - Fiddler
  - Wireshark(数据包级别)
  - tcpdump

---

分析步骤:

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

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

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

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

5. 测试修复方案
  - 做出修改
  - 清除缓存
  - 复现操作
  - 验证修复效果

4. Checklist

4. 检查清单

yaml

Network Debugging Checklist:

Connection:
  [ ] Internet connectivity verified
  [ ] Firewall allows connection
  [ ] VPN not blocking
  [ ] Proxy configured if needed
  [ ] DNS resolving correctly

Request:
  [ ] Correct URL
  [ ] Correct HTTP method
  [ ] Required headers present
  [ ] Authorization correct
  [ ] Request body valid

Response:
  [ ] Status code expected
  [ ] Response headers correct
  [ ] Content-Type appropriate
  [ ] Response body valid
  [ ] No parsing errors

Performance:
  [ ] DNS lookup <50ms
  [ ] Connection <100ms
  [ ] TTFB <500ms
  [ ] Download reasonable
  [ ] Total time acceptable

Monitoring:
  [ ] Error logging enabled
  [ ] Network metrics tracked
  [ ] Alerts configured
  [ ] Baseline established

yaml

网络调试检查清单:

连接:
  [ ] 已验证互联网连通性
  [ ] 防火墙允许连接
  [ ] VPN未阻止连接
  [ ] 已配置代理(如果需要)
  [ ] DNS解析正常

请求:
  [ ] URL正确
  [ ] HTTP方法正确
  [ ] 包含必要请求头
  [ ] 授权信息正确
  [ ] 请求体格式有效

响应:
  [ ] 状态码符合预期
  [ ] 响应头正确
  [ ] Content-Type合适
  [ ] 响应体格式有效
  [ ] 无解析错误

性能:
  [ ] DNS查询<50ms
  [ ] 连接建立<100ms
  [ ] TTFB<500ms
  [ ] 下载时间合理
  [ ] 总时长可接受

监控:
  [ ] 已启用错误日志
  [ ] 已跟踪网络指标
  [ ] 已配置告警
  [ ] 已建立性能基线

Key Points

关键点

Use Network tab for request analysis
Check status codes and headers first
Simulate network conditions for testing
Test CORS with curl before debugging
Monitor DNS and TLS times
Implement retry logic for reliability
Use appropriate timeouts
Log requests for debugging
Test on slow networks
Verify error handling

使用网络标签分析请求
首先检查状态码和请求头
模拟网络条件进行测试
调试CORS前先用curl测试
监控DNS和TLS耗时
实现重试逻辑提升可靠性
使用合适的超时设置
记录请求用于调试
在慢速网络上测试
验证错误处理逻辑