ばりっどーぬ - OpenAPI Valid Dog

About

開発中のWebアプリケーションがAPIと正しく通信しているか、リアルタイムで確認できるDevTools拡張機能です。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 こんな時に便利
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

• バックエンドがまだ開発途上で、正しく動作しているか確認したい
• フロントエンドが仕様通りにAPIを呼び出しているか検証したい
• 本番環境で発生した不具合の原因を調査したい
• APIの仕様変更後、既存の画面が正しく動作するかチェックしたい

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✨ 主な機能
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📡 リアルタイムトラフィック監視
  DevToolsを開いている間、すべてのHTTP通信を自動的にキャプチャします。

📋 OpenAPI仕様書による自動検証
  YAML/JSON形式のOpenAPI仕様書を読み込み、以下を自動チェック：
  ・パスの存在確認
  ・HTTPメソッドの妥当性
  ・ステータスコードの定義確認
  ・リクエスト/レスポンスボディのスキーマ検証
  ・ヘッダーとクエリパラメータの検証

🔍 強力なフィルタ機能
  ・仕様書にマッチする通信のみを表示
  ・バリデーションエラーがある通信のみを表示

🌐 日本語/英語対応
  ワンクリックで言語を切り替えられます。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📖 使い方
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. DevToolsを開く（F12 または 右クリック→検証）
2. 「ValidDog」タブを選択
3. 「仕様書」ボタンからOpenAPI仕様書を読み込む
4. 対象のWebアプリを操作すると、通信がリストに表示されます
5. 各通信をクリックして詳細とバリデーション結果を確認

詳細な使用方法: https://github.com/HoppingGanon/ValidDog/blob/main/docs/howtouse_ja.md

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔒 プライバシー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

• すべての処理はローカルで実行されます
• 通信内容や仕様書を外部サーバーに送信することはありません
• 仕様書はブラウザのローカルストレージに保存されます

ご意見・ご要望・バグ報告はGitHubリポジトリまでお願いします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

A DevTools extension that monitors API traffic in real-time and validates requests/responses against your OpenAPI specifications.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 Perfect For
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

• Verifying backend APIs are working correctly during development
• Checking if frontend is calling APIs according to specifications
• Debugging production issues by analyzing API communication
• Testing existing features after API specification changes

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✨ Key Features
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📡 Real-time Traffic Monitoring
  Automatically captures all HTTP traffic while DevTools is open.

📋 OpenAPI Spec Validation
  Load YAML/JSON OpenAPI specs to automatically validate:
  • Path existence
  • HTTP method validity
  • Status code definitions
  • Request/Response body schema
  • Headers and query parameters

🔍 Powerful Filtering
  • Show only spec-matched traffic
  • Show only validation errors

🌐 Multi-language Support
  Switch between English and Japanese with one click.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📖 How to Use
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. Open DevTools (F12 or Right-click → Inspect)
2. Select the "ValidDog" tab
3. Click "Spec" to load your OpenAPI specification
4. Interact with your web app - traffic appears in the list
5. Click each entry to view details and validation results

Detailed documentation: https://github.com/HoppingGanon/ValidDog/blob/main/docs/howtouse_en.md

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔒 Privacy
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

• All processing is done locally
• No traffic data or specs are sent to external servers
• Specs are stored in browser local storage

Feedback, suggestions, and bug reports welcome on GitHub!