新しいコマンド エディタで Chrome Devtools Protocol（CDP）コマンドを効率的に作成

Hadrien Jaubert

Chrome DevTools Protocol（CDP）は、デベロッパーが実行中の Chrome ブラウザと通信できるようにするリモート デバッグ プロトコル（API）です。Chrome DevTools は CDP を使用して、ブラウザの状態の検査、動作の制御、デバッグ情報の収集を支援します。CDP を使用する Chrome 拡張機能を作成することもできます。

たとえば、次の CDP コマンドは、指定された styleSheetId のスタイルシートに、指定された ruleText を含む新しいルールを location で指定された位置に挿入します。

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

[プロトコル モニタ] ドロワータブでは、CDP リクエストを送信し、DevTools が送受信するすべての CDP リクエストとレスポンスを表示できます。

プロトコル モニタの下部にあるコマンドライン バー。

これまでは、特にパラメータが多いコマンドを手動で作成するのは困難でした。角かっこや引用符の開始と終了に注意するだけでなく、コマンドのパラメータも覚えておく必要があり、そのために CDP のドキュメントを参照する必要がありました。

この問題を解決するため、DevTools に新しい CDP エディタが導入されました。このエディタの主な目的は次のとおりです。

  • コマンドの自動補完。自動補完機能を使用して使用可能なコマンドのリストを提供することで、CDP コマンドの入力を簡素化します。
  • コマンド パラメータを自動入力する。使用可能なコマンド パラメータのリストを確認するために CDP ドキュメントを確認する必要がなくなります。
  • パラメータの入力を簡素化。送信するパラメータの値を入力するだけです。
  • 編集して再送信します。CDP コマンドをすばやく変更できるようにして、プロトタイピングの速度を向上させます。

では、この新しいエディタの機能と使い方を見ていきましょう。

予測入力機能

予測入力のプルダウン メニュー。

コマンド入力バーに自動補完機能が追加されました。アクセスできる CDP コマンドの名前を記述するのに役立ちます。これは、パラメータを受け取らないコマンドに非常に便利です。

文字列パラメータと数値パラメータ

この新しいエディタを使用すると、プリミティブ パラメータの値を簡単に編集できます。エディタを開くには、コマンド入力の横にある 左側のパネルを開きます。 アイコンをクリックします。

コマンド名を入力すると、対応するパラメータがエディタに自動的に表示されます。どのコマンドにどのパラメータが対応しているかをドキュメントで確認する必要はありません。また、エディタでは、必須パラメータが最初に（赤色で）、省略可能なパラメータが次に（青色で）表示されます。

省略可能なパラメータに値を追加するには、その名前にカーソルを合わせて + ボタンをクリックします。パラメータを未定義にリセットするには、[デフォルト値にリセット] ボタンをクリックします。

+ ボタンと [デフォルト値にリセット] ボタン。

列挙型パラメータとブール値パラメータ

列挙型またはブール値のパラメータを編集すると、プルダウン メニューが表示されます。このメニューには、列挙型の場合は有効な値の選択肢が表示され、ブール値の場合は単純な true または false のオプションが表示されます。この機能により、列挙型パラメータに誤った値を入力する可能性を減らし、精度と簡素さを維持できます。

ブール値と列挙型のプルダウン メニュー。

配列パラメータ

配列パラメータの場合は、配列に値を手動で追加できます。パラメータの行にカーソルを合わせ、+ ボタンをクリックします。

配列アイテムを追加する [+] ボタン。

配列アイテムを 1 つずつ削除するには、アイテムの横にあるゴミ箱ボタンをクリックします。ブロックボタンを使用して、配列からすべてのパラメータを消去することもできます。この場合、配列パラメータは [] にリセットされます。

[パラメータを削除] ボタンと [デフォルトにリセット] ボタン。

オブジェクト パラメータ

オブジェクト パラメータを受け取るコマンドを入力すると、このオブジェクトのキーがエディタに表示され、値を直接編集できます。これは、すべてのタイプのネストされたパラメータで機能します。

ネストされたパラメータ。

エディタでコマンドとパラメータの動作を確認する

パラメータやコマンドの目的が不明だったことはありますか？コマンドやパラメータにカーソルを合わせると、オンライン ドキュメントへのリンクを含む説明的なツールチップが表示されます。

コマンドにカーソルを合わせると表示される説明ツールチップ。

間違ったパラメータを送信する前に警告する

これまで、パラメータの値が正しい型かどうかわからない場合は、エラー レスポンスを待たなければならず、手間がかかっていましたが、この新しいエディタでは、入力した値をパラメータが受け入れられない場合は、リアルタイムでエラーが表示されます。

値が正しくないパラメータの横にあるエラーアイコン。

コマンドを再送信する

送信したコマンドのパラメータを調整する必要がある場合、再度入力する必要はありません。コマンドを編集して再送信するには、データグリッド内のアイテムを右クリックし、プルダウン メニューから [編集して再送信] を選択します。これにより、CDP エディタが自動的に再開され、選択したコマンドが事前に入力されます。

データグリッド内のコマンドのプルダウン メニュー。[編集して再送信] オプションがあります。

コマンドを JSON 形式にコピーする

CDP コマンドを JSON 形式でクリップボードにコピーするには、ツールバーの左端にある コピー] をタップします。 コピー アイコンをクリックします。また、入力バーにコマンドを直接入力すると、エディタにシームレスに入力されます。その逆も同様です。

まとめ

この新しい CDP エディタの設計の目的は、CDP コマンドの入力を簡素化することでした。新しいエディタでは、ドキュメントとともにパラメータを確認したり、CDP コマンドを簡単に送信したりすることもできます。

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta を使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。