コンソールとソースでコードを生成する

Gemini を使用して、[コンソール] パネルと [ソース] パネルでコードを生成します。

Chrome 147 以降では、この機能はウェブページのすべてのテキストベースのリソースで使用できます。コード生成の優先言語は JavaScript です。

[コンソール] パネルと [ソース] パネルのコード生成機能。

対象

DevTools で利用可能な AI 機能を使用するには、次の条件を満たしている必要があります。

  • 18 歳以上で、サポートされている地域にお住まいである。
  • Chrome の最新バージョンを使用している。
  • Google アカウントで Chrome にログインしている。
  • DevTools の [設定] > [設定] > [外観] > [言語] で [英語（米国）] が選択されている。
  • DevTools の [] [設定] > [AI イノベーション] が有効になっている。

コード生成を有効にする

コード生成を有効にするには、[DevTools] > [][Settings] > [AI innovations] に移動し、[Code suggestions] をオンにします。

[設定] - [AI イノベーション] のコード提案機能の切り替え。

[コンソール] パネルまたは [ソース] パネルからコード生成を有効にするには:

  1. ソースファイルを編集しているとき、または [コンソール] に入力しているときに、Mac では Command + i、Windows では Control + i を押します。このショートカットでは、i は小文字です。

    ショートカットを使用して [ソース] パネルと [コンソール] パネルでコードの候補をオンにする。

  2. ダイアログ ウィンドウの [考慮事項] を確認し、[OK] をクリックします。

    [考慮事項] ダイアログ ウィンドウ。

コードを生成する

[コンソール] パネルまたは [ソース] パネルでコードを生成するには:

  1. コード コメントにプロンプトを入力します（例: // Loop to check all img elements for valid alt attributes）。

    JavaScript のコメント内のコード生成プロンプト。

  2. 生成を開始するには、Mac では Command + i、Windows では Control + i を押します。このショートカットでは、i は小文字です。

  3. コード生成が完了するまで待ちます。この処理には数秒かかることがあります。

  4. Tab または Enter を押して生成されたコードブロックを受け入れるか、Esc を押して拒否します。

    生成されたコードブロックを承認または拒否する。

関連情報