ネットワークコンソールツールを使用して Web API 要求を作成して送信する

[アーティクル]
12/08/2023

ネットワークコンソール ツールを使用して Web API 要求を送信します。たとえば、Web API を開発してテストする場合は、 ネットワークコンソール ツールを使用します。

URL をテストするには:

DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。
[メイン] ツールバーの [その他のツール ] () ボタンをクリックし、[ネットワークコンソール] を選択します。

ネットワークコンソールツールが開きます。
[ 要求の作成] をクリックします。
[ ネットワークコンソールナビゲーターの非表示 ] () ボタンをクリックして、より多くの領域を取得します。
[ 無題の要求 ] テキストボックスに、次のようなテストする URL を入力します。 https://microsoftedge.github.io/Demos/devtools-a11y-testing/
[ GET ] ドロップダウンリストで、 既定の GET などの REST メソッドを選択します。 REST メソッドには、次のものが含まれます。
- GET
- HEAD
- POST
- PUT
- PATCH
- DELETE
- オプション
必要に応じて、[ クエリ ] セクションで、[ キー ] テキストボックスと [値] テキストボックスにキーと値のペア (ID や 123 など) を入力します。

計算された URL は、キーと値のペアを入力すると更新されます。
[ 送信 ] ボタンをクリックします。 ネットワークコンソール ツールの下部には、次のタブが表示されます。
- プレビュー
- Body
- ヘッダー
- Cookie

ネットワークツール内からネットワークコンソールツールを開く

ネットワークツールから開始して ネットワークコンソールツールに アクセスするには、次の手順を実行します。

DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。
[メイン] ツールバーの [ネットワーク] () タブを選択します。そのタブが表示されない場合は、その他のツール (ボタンをクリックし、[ネットワーク] を選択します。
Web ページを更新します。 ネットワーク ツールには、Web ページの構築に使用されるリソースが表示されます。
変更して再送信するネットワーク要求を右クリックし、[編集] と [ 再送信] を選択します。

ネットワークコンソール ツールは、DevTools の下部にある [クイックビュー] パネルで開きます。
[ ネットワークコンソールナビゲーターの非表示 ] () ボタンをクリックして、より多くの領域を取得します。
ネットワーク要求情報を編集し、[ 送信 ] ボタンをクリックします。

コレクション、環境、環境変数の保存とエクスポート

次の操作を行うことができます:

コレクションを保存およびエクスポートします。
環境を保存してエクスポートします。
環境変数のセットを編集およびエクスポートします。

新しい環境を定義して保存するには:

DevTools の ネットワークコンソール ツールで、ツールの左側のナビゲーター部分が表示されていることを確認します。必要に応じて、[ ネットワークコンソールナビゲーターの表示 ] () ボタンをクリックします。
[環境] セクションで、[新規] () ボタンをクリックします。
表示されるテキストボックスに、新しい環境の名前を入力します。
新しい環境の形式を選択します。
- ネットワークコンソール - 1 つのファイル内の複数の環境をサポートします。
- Postman - ファイルごとに 1 つの環境をサポートしますが、Postman と連携します。