Media
1 item
Description
DevToolsでAPIトラフィックをリアルタイム監視し、OpenAPI仕様書に基づいてリクエスト・レスポンスを自動検証。開発中のバグを素早く発見できます。 開発中の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!