← 機能一覧に戻る
Pro

APIテスター

API Tester は、REST、GraphQL、および WebSocket 呼び出し用の組み込み HTTP クライアントであり、すでに閲覧しているページのコンテキストで実行されます。そのため、Cookie、セッション、オリジンは自動的に適用され、別のアプリにトークンをコピーする必要はありません。

API のテストは通常​​、ブラウザーを終了することを意味します。 Postman または Insomnia を開き、ブラウザーに既に存在するもの (セッション Cookie、ベアラー トークン、正しいオリジン、CSRF ヘッダー) を 5 分かけて再作成します。リクエストの準備が完了するまでに、バグが存在するコンテキストとは異なるコンテキストをテストすることになります。

API Tester ではそのステップが削除されます。表示しているページ内からリクエストがページ自体として送信されるため、サインインしている内容がそのままリクエストにサインインされます。独自の管理エンドポイントに対する GET は、Cookie と一緒に移動するため、すぐに機能します。設定したり、同期を維持したりする必要はありません。

[REST] タブには、メソッド、絶対 URL または相対 URL、1 行に 1 つずつ記述されるヘッダー、および本文が表示されます。応答には、ステータス、所要時間、サイズ、きれいに出力された JSON、および完全な応答ヘッダーが返されます。 GraphQL タブは、エンドポイント、クエリ、変数を取得し、リクエストを構築し、HTTP ステータスが 200 であってもレスポンスに GraphQL エラーが含まれる場合にそれを通知します。 WebSocket タブは実際の接続を開き、入力したフレームを送信し、タイムスタンプ付きで双方向のすべてを記録します。

ページ独自のコンテンツ セキュリティ ポリシーまたは CORS ルールによって通話がブロックされると、一方のスイッチが代わりに、どちらにも従わない内線から同一の要求を再送信します。これにより、サーバーの問題とブラウザのポリシーの問題、つまり同じリクエスト、2 つのコンテキスト、2 つの回答を区別する簡単な方法が得られます。過去 25 件のリクエストが保持されるため、昨日試したリクエストにワンクリックで戻ることができます。

ライブプレビュー
app.example.com/dashboard
APIテスター ページコンテキストで実行する
REST GraphQL WebSocket 歴史
POST /api/v2/orders 送信
ヘッダー
Content-Type: application/json
X-Request-Id: 4f2b-dev-check
201 Created 142 ms · 1.2 KB かわいい 生 ヘッダー
{
  "id": "ord_8821",
  "status": "pending",
  "total": 49.90
}
主な機能

実際のヘッダーを使用したリクエスト ビルダー

任意の方法を選択し、絶対 URL または相対 URL を入力し、ヘッダーを 1 行に 1 つずつ Name: value として書き込みます。相対 URL は現在いるページに対して解決されるため、/api/users はそのまま機能します。

ログインセッションで実行

リクエストはページ自体のコンテキストから出て、その Cookie、オリジン、セッションを伝えます。認証されたエンドポイントは、トークンのコピーを行わずに、アプリに対する応答とまったく同じように応答します。

GraphQL クエリと変数

エンドポイント、クエリ、JSON 変数を入力します。正しい POST 本文が構築されます。 200 レスポンス内で返された GraphQL エラーは、非表示ではなくカウントされ、フラグが付けられます。

双方向WebSocketコンソール

ws:// または wss:// 接続を開き、フレームを送信し、読み取り専用のキャプチャだけでなく、タイムスタンプ、サイズ、接続状態を含む両方向のすべてのフレームを監視します。

読み取り可能な応答

ステータス、タイミング、転送サイズを事前に表示し、Pretty、Raw、Headers ビューを表示します。 JSON は自動的にフォーマットされ、ワンクリックで何でもコピーできます。

必要に応じて CSP と CORS をバイパスする

ページの CSP または CORS ルールによって呼び出しがブロックされている場合は、[実行元] を [内線番号] に切り替えて、ページの外部から同じリクエストを送信します。これは、ブラウザー ポリシーからサーバー エラーを分離する即時の方法です。

主な活用例

サインイン中にエンドポイントをテストする

Cookie をエクスポートしたりトークンを生成したりせずに、認証されたセッションが必要なエンドポイントにアクセスします。あなたはすでにそのタブにログインしているので、リクエストはあなたとして送信されます。

401 または 403 のデバッグ

失敗したリクエストを正確に送信し、応答ヘッダーを検査してから、サーバーが何を要求しているかを正確に確認するために、Authorization ヘッダーを 1 文字変更して再送信します。

GraphQL レスポンスの形状を確認する

実際の変数を使用してライブ エンドポイントに対してクエリを実行し、フォーマットされた結果を読み取ってから、それを使用するフロントエンド コードを作成します。

ライブ WebSocket フィードの視聴

ソケットに接続し、サブスクライブ フレームを送信し、メッセージ形式を確認しながらサーバーが何をプッシュバックするかをリアルタイムで監視します。

チケットのバグを再現する

失敗したリクエストとレスポンスをキャプチャしてコピーし、全体像を問題に貼り付ければ、それを拾った人が推測する必要がなくなります。

使い方
1

オープンAPIテスター

DevSuite Pro ドックの API Tester アイコンをクリックします。パネルが開き、REST、GraphQL、WebSocket、および履歴のタブが表示され、現在のサイトのオリジンがあらかじめ入力されています。

2

リクエストの説明

メソッドを選択し、URL (完全な URL、または /api/orders などの相対 URL) を入力します。ヘッダーを 1 行に 1 つ追加し (Content-Type: application/json)、メソッドがヘッダーを受け取る場合は本文を貼り付けます。

3

送信してください

[送信] または Ctrl+Enter (Mac の場合は Cmd+Enter) を押します。 The request goes out from the page, so you stay signed in as whoever you are in that tab.

4

応答を読む

ステータスピル、タイミング、サイズがすぐに表示されます。 Pretty、Raw、Headers を切り替えて、いずれかをコピーします。ページの CSP が通話をブロックした場合は、[実行元] を [内線番号] に切り替えて、再度送信します。

5

後で再利用する

すべてのリクエストはステータスとともに履歴に​​保存されます。任意のエントリをクリックすると、メソッド、URL、ヘッダー、本文がフォームに直接ロードされます。

試してみませんか?

DevSuite Pro を無料でインストールして、ブラウザで 71 以上の開発者ツールを利用しましょう。

Chrome に追加 Edgeに追加 Firefox に追加