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. 03CORSや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 対応