AI アシスタントとチャットする

Matthias Rohmer

Sofia Emelianova

DevTools には、組み込みの AI エージェントとチャットしてウェブサイトを理解し、問題を解決するのに役立つ AI アシスタンス パネルが用意されています。

AI アシスタンス パネルは Gemini を搭載しており、次のことができます。

• ウェブ開発に特化しています。
• ウェブページ全体に関する一般的な質問に回答できるほか、スタイル設定、ネットワーク、パフォーマンスなど、さまざまなトピックに関する具体的なインサイトを提供できます。
• DOM 要素、ネットワーク リクエスト、パフォーマンス トレース イベントなど、チャットする特定のコンテキストを自動的に絞り込んで選択します。
• 監査の実行やパフォーマンス トレースの記録などの自律的なアクションを実行できます。
• アクションと推論のステップごとのチュートリアルと、DevTools の関連部分へのリンクを提供します。クリックして確認できます。
• コードの変更を提案し、コーディング エージェントが実行するプロンプトをインサイトに基づいて生成できます。

注: 自律的なアクション、ステップごとのチュートリアル、プロンプト生成機能は、Chrome バージョン 149 以降でご利用いただけます。

AI アシスタンス を使用すると、ウェブサイトのスタイル設定、ネットワーク、パフォーマンス、ソースなどをデバッグできます。

AI アシスタンス パネルで Gemini と効果的にチャットするには、パネルを開く方法、プロンプトの入力方法、会話の流れを制御する方法を学習してください。

AI アシスタンス パネルを開く

AI アシスタンス パネルは、デフォルトでドロワーに開きます。

パネルを開くには、上部のメインツールバーの右側にあるグローバル エントリ ポイントにある [AI アシスタンス] ボタンをクリックします。

パネルから

会話コンテキストが選択された状態で、[Elements]、[Network]、[Sources]、または [Performance] パネルから次の 2 つの方法でパネルを開くことができます。

• 要素、ネットワーク リクエスト、ソースファイル、または展開されたパフォーマンス インサイトの横にある [Debug with AI] ボタンをクリックします。

  

• 要素、リクエスト、ファイル、トレース エントリを右クリックし、[AI でデバッグ] コンテキスト メニューから一般的なプロンプト オプションのいずれかを選択します。

  

コマンド メニューから

コマンド メニューから [AI アシスタンス] を開くには、「AI」と入力し、[Drawer] バッジの横にある [Show AI assistance] コマンドを実行します。

[その他のツール] メニューから

または、右上の設定 [その他のオプション] > [その他のツール] > [AI アシスタンス] を選択します。

プロンプト

新しい会話を開始すると、AI アシスタンス がサンプル プロンプトを表示し、すぐに開始できるようにします。

いずれかのプロンプトをクリックすると、パネルの下部にあるプロンプト入力フィールドに事前入力されます。

または、入力フィールドに独自のプロンプトや質問を入力します。

プロンプトを送信するには、Enter キーを押すか、入力フィールドの右側にある矢印をクリックします。

コンテキストのない自由形式のプロンプト

自由形式のチャットボックスでは、事前のコンテキストなしで、より高度な自由形式の質問をすることができます。次に例を示します。

• How to use DevTools to debug accessibility?

  AI アシスタンス は、まず Lighthouse のアクセシビリティ監査を実行して、プロンプトに適切に回答します。

• What are the slowest network requests on this page?

  AI アシスタンス は、疑わしいリクエストのリストと [Network] パネルへのリンクを提供します。リクエストをクリックして会話コンテキストとして選択できます。

• What performance issues exist on the page?

  AI アシスタンス は、選択した設定でパフォーマンス トレースを自動的に記録し、このプロンプトに回答します。

• How do I use the Animation panel? や Where is the high contrast setting in DevTools? などのプロンプトは、DevTools 自体に関する直接的なヘルプを提供します。

チャットを開始すると、AI アシスタンス は、チャットが空の場合、操作に基づいてコンテキストをインテリジェントに更新します。手動で選択した場合は、その選択が尊重されます。

コンテキストを含むプロンプト

[AI アシスタンス] パネルから開くと、対応する会話コンテキストがチャットボックスで選択されるため、選択した内容について具体的にチャットできます。

コンテキストはいつでも手動で変更できます。そのためには、[Elements] で要素を選択し、[Network] でリクエストを選択し、[Performance] でトレース エントリを選択し、[Sources] でファイルを選択します。

また、たとえば [Sources] パネルからファイルの一部をコピーしてチャットに貼り付け、その内容を質問することもできます。

次に、AI アシスタンス での会話の流れについて詳しく説明します。

会話の流れ

プロンプトを送信すると、エージェントとの会話が開始されます。プロンプトに最適な回答を提供するために必要な情報を取得するため、エージェントはウェブ API を呼び出す JavaScript を生成して実行します。

エージェントの進行状況はステップごとに表示されます。最初のステップのステータスは Investigating… です。

エージェントがプロンプトに回答するために具体的なアクションを実行すると、最初のステップのラベルが更新されます。

デバッグする内容によっては、エージェントが DevTools でアクション（パフォーマンス トレースの記録や Lighthouse 監査の実行など）を実行することもあります。

エージェントのチュートリアル

エージェントがプロンプトに対する回答を生成すると、最初のステップのラベルが [Show agent walkthrough] または [Show thinking] に変わります。これを展開すると、右側のサイドパネルに、エージェントがデータを分析するために行った手順が表示されます。

手順は次のとおりです。

• エージェントが実行したコード スニペットと返されたデータ。コードをコピーしてコンソールで実行できます。
• 検出結果を人間が読める形式で表示するウィジェット。

ウィジェットの右上には [Reveal] ボタンがあり、DevTools の関連部分に移動できます。

フォローアップ プロンプト

エージェントが最終的な回答に達すると、フォローアップ プロンプトが提案されることがあります。いずれかをクリックして会話を続けます。

コーディング エージェントのプロンプトを生成する

コーディング エージェントのプロンプトを生成するには、[Copy to coding agent] をクリックします。

エージェントは検出結果とインサイトを要約し、実行可能なプロンプトを最小化された形式または人が読める Markdown 形式で提供します。これをクリップボードにコピーして、選択した AI エージェントでコーディングを続行できます。

一時停止した会話

AI アシスタンス は、副作用のあるコードを生成する可能性があります。その場合、コードが実行される前に会話が一時停止します。

会話が一時停止したら、エージェントが提案したコードを確認します。play_arrow [**続行**] をクリックして続行するか、[**キャンセル**] をクリックして実行を阻止します。

**注:** 会話が一時停止している間は、プロンプトの入力が無効になります。

提案されたコードの変更は、[Changes] panelで確認できます。

エージェントは DevTools 内で変更を適用しますが、ワークスペースを構成して、DevTools がソースに変更を保存できるようにすることもできます。

ワークスペースに変更を保存する

接続されたワークスペース フォルダを使用すると、AI アシスタンス が提案したスタイルの変更を、パソコンの CSS ソースファイルに保存できます。

手順は次のとおりです。

1. まず、メタデータ ファイルを生成してワークスペース フォルダを接続します。

   フォルダは手動で追加することもできます。

2. チャットを[Elements] パネルから開始します。

3. AI アシスタンス に CSS の変更を促します。

4. AI アシスタンス がコードを生成して実行を一時停止することがあります。コードを確認し、[続行] をクリックして変更をライブでテストします。

5. [Unsaved changes] セクションを開き、[Apply to workspace] をクリックします。

   注: 接続されたワークスペース フォルダがない場合、このステップで、AI アシスタンス パネルに手動で追加するよう求められます。

6. diff で変更内容を確認し、[Save all] をクリックします。

このワークフローについては、以下をご覧ください。

回答がない

AI アシスタンス は、さまざまな理由で回答を提供しないことがあります。

プロンプトが AI アシスタンス で 議論できる内容であると思われる場合は、バグを報告してください。

会話履歴

会話を開始すると、次の回答はすべて、ユーザーと AI の間の以前のやり取りに基づいて行われます。

AI アシスタンスはセッション間の会話履歴を保存するため、DevTools または Chrome を再読み込みした後でも、以前のチャットにアクセスできます。

パネルの左上にあるコントロールを使用して、会話履歴を管理します。

新たに測定

現在選択されている 会話コンテキストで新しい会話を開始するには、追加ボタンをクリックします。

続行

過去の会話を続行するには、履歴 ボタンをクリックして、コンテキスト メニューから選択します。

注: 会話コンテキストは、会話が停止してから消えている可能性があるため、自動的に更新されません。

削除

会話を履歴から削除するには、削除ボタンをクリックします。

回答を評価してフィードバックを提供する

AI アシスタンス は試験運用版の機能です。そのため、回答の品質と全体的なエクスペリエンスを改善する方法を把握するために、皆様からのフィードバックを積極的に募集しています。

回答に投票する

回答の下にある thumb_up [高評価] ボタンと thumb_down [低評価] ボタンを使用して、回答を評価します。

回答を報告する

不適切なコンテンツを報告するには、投票ボタンの横にある報告ボタンをクリックします。