プロトコル モニターを使用して、DevTools によって行われたすべての CDP リクエストとレスポンスを表示し、CDP コマンドを直接送信します。
概要
Chrome DevTools は、Chrome DevTools Protocol(CDP)を使用して、Chrome ブラウザの計測、検査、デバッグ、プロファイリングを行います。デベロッパーは プロトコル モニターを使用して、プログラムで CDP を操作できます。
プロトコル モニタを使用すると、次のことができます。
- CDP のリクエストとレスポンスを記録する
- CDP メッセージを検査する
- CDP メッセージを保存する
- CDP コマンドを送信する
プロトコル モニターを開く
プロトコル モニターを開く手順は次のとおりです。
テストが有効になっていることを確認します。[設定] > [試験運用版] で、[プロトコル モニタ] チェックボックスをオンにします。
以下のボタンを押してコマンド メニューを開きます。
- macOS: Command+Shift+P
- Windows、Linux、ChromeOS: Ctrl+Shift+P
「
Protocol monitor
」と入力し、[Show Protocol monitor] を選択して Enter キーを押します。DevTools ウィンドウの下部に [プロトコル モニター] パネルが表示されます。
または、右上の
[その他のオプション] > [その他のツール] > [プロトコル モニタ] を選択します。CDP のリクエストとレスポンスを記録する
プロトコル モニターを開くと、現在のページから CDP メッセージの記録が自動的に開始されます。ページを更新したり、DevTools を閉じたりしても、プロトコル モニターは録画を続けます。
録画を停止または開始するには、パネル上部のアクションバーの左側にある録画ボタンをクリックします。
CDP メッセージを検査する
プロトコル モニターが記録すると、CDP メッセージがパネルの左側の表に記録されます。
[メソッド]、[リクエスト]、[レスポンス] のいずれかのセルをクリックすると、パネルの右側に [リクエスト] または [レスポンス] データの詳細ビューが開きます。
それぞれのヘッダータブをクリックして、[リクエスト] データと [レスポンス] データを切り替えます。
[Method] 列の値を右クリックすると、コンテキスト ベースのオプションが表示されます。
CDP メッセージを消去してダウンロードする
記録された CDP メッセージをすべて消去するには、アクションバーの消去アイコンをクリックします。
録音されたメッセージを JSON ファイルとしてダウンロードするには、ダウンロード アイコン をクリックします。
未加工の CDP コマンドを送信する
プロトコル モニターから CDP コマンドを送信するには、主に次の 2 つの方法があります。
コマンドにパラメータが不要な場合は、プロトコル モニタの下部にある入力フィールドにコマンドを入力し、Enter キーを押します(例:
Page.captureScreenshot
)。コマンドにパラメータが必要な場合は、JSON 形式で指定します(例:
{"cmd":"Page.captureScreenshot","args":{"format": "jpeg"}}
)。入力フィールドの右側にあるプルダウンでターゲットを指定します。
CDP エディタを使用してコマンドを編集して発行することもできます。
- コマンド入力フィールドの横にある [CDP コマンド エディタを表示する] ボタンをクリックして、コマンド エディタを開きます。
- プルダウン リストからターゲットを選択し、コマンド プロンプトの横に CDP コマンドを入力します。自動入力により、関連するオプションが表示されます。使用するコマンドを選択します。
- CDP コマンドを入力すると、エディタはプロトコル定義に基づいて構造化されたパラメータを作成します。これらのパラメータを入力して、コマンドとともに送信します。
- [ ] [コマンドを送信] ボタンをクリックするか、Ctrl + Enter キーを押してコマンドを送信します。
表からコマンドを編集して再送信することもできます。表内のアイテムを右クリックし、プルダウン メニューから [編集して再送信] を選択します。これにより、CDP エディタが自動的に再開され、選択したコマンドが事前に入力されます。
CDP エディタの詳細については、新しいコマンド エディタで Chrome Devtools Protocol(CDP)コマンドを効率的に作成するをご覧ください。