プロトコル モニター: CDP リクエストの表示と送信

Dale St. Marthe
Dale St. Marthe
LinkedIn

プロトコル モニターを使用して、DevTools によって送信されたすべての CDP リクエストとレスポンスを表示し、CDP コマンドを直接送信します。

概要

Chrome DevTools では、Chrome DevTools Protocol（CDP）を使用して Chrome ブラウザの計測、検査、デバッグ、プロファイリングを行います。デベロッパーは、プロトコル モニターを使用して、CDP をプログラムで操作できます。

プロトコル モニターでは、次のことができます。

  • CDP のリクエストとレスポンスを記録する
  • CDP メッセージを検査する
  • CDP メッセージを保存する
  • CDP コマンドを送信する

プロトコル モニターを開く

プロトコル モニターを開く手順は次のとおりです。

  1. テストが有効になっていることを確認します。[Settingssettings] > [Experiments] で [Protocol Monitor] チェックボックスをオンにします。

  2. 次のコマンドを実行して、コマンド メニューを開きます。

    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Ctrl+Shift+P コマンド メニュー

  3. 「Protocol monitor」と入力し、[プロトコル モニターを表示] を選択して、Enter キーを押します。DevTools ウィンドウの下部に [プロトコル モニター] パネルが表示されます。

または、右上にある more_vert [その他のオプション] > [その他のツール] > [プロトコル モニター] を選択します。

CDP のリクエストとレスポンスを記録する

プロトコル モニターを開くと、現在のページから CDP メッセージの記録が自動的に開始されます。ページを更新したり、Devtools を閉じたりしても、プロトコル モニターは記録を継続します。

録画を停止または開始するには、パネル上部のアクションバーの左側にある録画ボタンをクリックします。

プロトコル モニターパネルの録画ボタン

CDP メッセージを検査する

プロトコル モニターのレコードとして、CDP メッセージがパネルの左側にあるテーブルに記録されます。

[メソッド]、[リクエスト]、または [レスポンス] のセルをクリックすると、パネルの右側に [Request] または [Response] のデータの詳細ビューが開きます。

プロトコル モニターパネルでハイライト表示されているメソッド。

リクエスト データとレスポンス データを切り替えるには、それぞれのヘッダータブをクリックします。

[メソッド] 列の値を右クリックすると、コンテキスト ベースのオプションが表示されます。

CDP メッセージを消去してダウンロードする

記録された CDP メッセージをすべて削除するには、アクションバーの [ブロックを解除] ボタンをクリックします。

録音されたメッセージを JSON ファイルとしてダウンロードするには、[Download download] をクリックします。

未加工の CDP コマンドを送信する

プロトコル モニターを使用して CDP コマンドを送信するには、主に次の 2 つの方法があります。

  • コマンドにパラメータが必要ない場合は、[Protocol Monitor] の下部にある入力フィールドにコマンドを入力し、Enter キーを押します（例: Page.captureScreenshot）。

    コマンドにパラメータが必要な場合は、JSON 形式（{"cmd":"Page.captureScreenshot","args":{"format": "jpeg"}} など）で指定します。

    入力フィールドの右側にあるプルダウンで、ターゲットを指定します。

プロトコル モニターでハイライト表示されているターゲット プルダウン。

  • CDP エディタを使用して、コマンドの編集や発行を行うこともできます。

    1. コマンド入力フィールドの横にある [left_panel_open] [CDP コマンド エディタを表示] ボタンをクリックして、コマンド エディタを開きます。
    2. プルダウン リストからターゲットを選択し、コマンド プロンプトの横に CDP コマンドの入力を開始します。予測入力により関連オプションが提示されます。使用するコマンドを選択します。 プロトコル モニターのコマンド入力。
    3. CDP コマンドを入力すると、エディタにより、プロトコル定義に基づいて構造化された形式のパラメータが作成されます。これらのパラメータを入力して、コマンドとともに送信します。 入力用にリストされた Service Worker 関連のパラメータを含むパラメータ入力。
    4. 送信 [コマンドを送信] ボタンをクリックするか、Ctrl + Enter キーを押してコマンドを送信します。

この表からコマンドを編集して再送信することもできます。表内のアイテムを右クリックし、プルダウン メニューから [編集して再送信] を選択します。CDP エディタが自動的に再度開き、選択したコマンドが事前入力されます。

CDP エディタについて詳しくは、新しいコマンド エディタを使用して Chrome Devtools Protocol（CDP）コマンドを効率的に作成するをご覧ください。