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

Hadrien Jaubert

Chrome DevTools プロトコル（CDP）は、デベロッパーが実行中の Chrome ブラウザと通信するためのリモート デバッグ プロトコル（API）です。Chrome DevTools では、CDP を使用して、ブラウザの状態の確認、動作の制御、デバッグ情報の収集を行います。CDP を使用する Chrome 拡張機能を構築することもできます。

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

{ 
    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 コマンドの名前を記述できます。これは、パラメータを受け取れないコマンドに非常に便利です。

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

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

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

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

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

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

enum または boolean パラメータを編集すると、プルダウン メニューが表示され、候補となる値（列挙型の場合）またはブール値用の簡単な true または false オプションが表示されます。この機能により、列挙型パラメータに誤った値が入力される可能性が減り、正確性とシンプルさが維持されます。

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

配列パラメータ

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

配列項目を追加する [+] ボタン。

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

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

オブジェクトのパラメータ

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

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

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

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

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

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

以前は、パラメータの値が正しい型であるかどうかがわからず、エラー レスポンスの読み取りを待たなければならない場合に、この新しいエディタが役立ちます。入力した値がパラメータで許容されない場合は、リアルタイムのエラーが表示されます。

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

コマンドを再送信する

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

データグリッドのコマンドのプルダウン メニューと [編集と再送信] オプション。

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

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

おわりに

この新しい CDP エディタの設計の背後にある DevTools チームの目標は、CDP コマンドの入力を簡素化することでした。新しいエディタでは、ドキュメントとともにパラメータを表示したり、CDP コマンドを簡単に送信したりすることもできます。

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

Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

  • crbug.com からご提案やフィードバックをお送りください。
  • DevTools の問題を報告するには、DevTools でその他のオプション アイコン その他   > [ヘルプ] > [DevTools の問題を報告する] を選択します。
  • @ChromeDevTools にツイートします。
  • 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。