mcpField
N
network-debugging

network-debugging

github.com/aj-geddes开发373528 次安装34 周前更新
代码仓库

关于 network-debugging

network-debugging 是用于排查应用网络问题的技能，涵盖浏览器工具、常见问题指南、调试技巧和检查清单。

主要功能

  1. 01检查浏览器 Network 面板
  2. 02常见网络问题指南
  3. 03调试工具与技巧
  4. 04故障排查清单

适用场景

  1. 01调查页面加载缓慢
  2. 02诊断请求失败或间歇性连接
  3. 03检查 CORS 与 SSL/TLS 问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill network-debugging

安装后在 Claude Code 中输入/network-debugging确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
browser-network-tools.md
checklist.md
common-network-issues.md
debugging-tools-techniques.md
scripts/
validate-api.sh
templates/
api-scaffold.yaml

详细介绍

网络调试

目录

概述

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

适用场景

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

快速开始

最简可运行示例：

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
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
浏览器网络工具浏览器网络工具
常见网络问题常见网络问题
调试工具与技巧调试工具与技巧
检查清单检查清单

最佳实践

✅ 应该
  • 遵循既定模式和约定
  • 编写清晰、易维护的代码
  • 添加适当的文档
  • 部署前进行充分测试
❌ 不应该
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown