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

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

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

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

対象

DevTools で利用可能な AI 機能を使用するには、次のことを確認してください。

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

コード生成を有効にする

コード生成を有効にするには、[DevTools] > [設定] > [AI イノベーション] に移動し、[コード候補] をオンにします。

[設定] - [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 キーを押します。

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

関連情報