DevTools には、AI エージェントとチャットしてウェブサイトを理解し、問題を修正するのに役立つ AI アシスタント パネルが用意されています。
AI アシスタンスを使用すると、ウェブサイトのスタイル設定、ネットワーキング、パフォーマンス、ソースをデバッグできます。
[AI アシスタンス] パネルで Gemini と効果的にチャットするには、パネルを開く方法、プロンプト、会話フローを制御する方法を学習します。
AI アシスタンス パネルを開く
[AI アシスタンス] パネルがドロワーに開きます。
パネルを開くには、上部のメイン ツールバーの右側にあるグローバル エントリ ポイントにある [AI アシスタンス] ボタンをクリックします。
[要素]、[ネットワーク]、[ソース]、[パフォーマンス] パネルから直接パネルを開くこともできます。要素またはリクエストを右クリックして [AI に質問] を選択します。
コマンド メニューから
コマンド メニューから AI アシスタンスを開くには、AI と入力し、[AI アシスタンスを表示] コマンドを実行します。このコマンドの横には [Drawer] バッジが表示されます。
![コマンド メニューが開き、[AI アシスタントを表示] がハイライト表示されている。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/open-command-menu.png?hl=ja)
[その他のツール] メニューから
または、右上にあるアイコン その他のオプション > [その他のツール] > [AI アシスタンス] を選択します。
プロンプト
新しい会話を開始するときに、AI アシスタントがプロンプトの例を提示し、すぐに作業を開始できるようにします。
いずれかのプロンプトをクリックすると、パネルの下部にあるプロンプト入力フィールドにプロンプトが自動入力されます。
または、入力フィールドに独自のプロンプトまたは質問を入力します。
プロンプトを送信するには、Enter キーを押すか、入力フィールドの右側にある矢印をクリックします。
無料のチャットボックスでは、「devtools を使用してアクセシビリティをデバッグするにはどうすればよいですか？」や「どのネットワーク リクエストが遅いですか？」などの高度な質問をすることができます。また、たとえば [ソース] パネルからファイルの一部をコピーしてチャットに貼り付け、その内容について質問することもできます。
スタイリング用の AI アシスタンス
[AI アシスタンス] パネルを使用して、ウェブサイトの全体的なレイアウトや特定の要素のスタイルを把握したり、CSS バグに対する AI 生成の修正を取得したりできます。
[要素] パネルから AI アシスタンスを開く
[要素] パネルから AI アシスタンスを開くには、DOM ノードを検査するときに、ノードを右クリックして [AI に質問] オプションを選択します。
![[AI に質問] がハイライト表示された要素のコンテキスト メニュー。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/styling/open-context-menu.png?hl=ja)
このように AI アシスタンスを開くと、検査された DOM 要素がすでに会話のコンテキスト要素として選択されています。
または、ホバーした DOM ノードに付いているフローティング ボタンをクリックします。
会話のコンテキスト
AI アシスタントとのチャットは、常に現在検査中の要素に関連付けられます。これは、[要素] パネルの DOM ツリーで最後に選択された要素です。この要素への参照は、パネルの左下に表示されます。
現在の要素の横にある要素ピッカーを使用するか、[要素] パネルの DOM ツリーから選択して、コンテキストを変更します。
コンテキストを選択した状態で、ビューポートのスクリーンショットを撮影してチャットに送信できます。チャット入力フィールドの横にある [スクリーンショットを撮る] ボタンをクリックします。
![[スクリーンショットを撮る] ボタンと、入力フィールドに添付されたスクリーンショット。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/take-screenshot.png?hl=ja)
スクリーンショットを使用すると、プロンプトに視覚的なコンテキストを追加できます。たとえば、表示されているすべてのボタンの間隔が同じかどうかを確認できます。
現在検証中の要素が会話の基盤となりますが、AI アシスタンスはすべての Web API にアクセスして、検証中のページからより多くの情報を収集できます。これには、document.querySelector を使用した他の要素のクエリや、計算されたスタイルの評価が含まれます。
ネットワークの AI アシスタンス
[ネットワーク] の AI アシスタンス パネルを使用して、ウェブサイトから送信されたリクエストを確認します。
ネットワーク パネルから AI アシスタンスを開く
[ネットワーク] パネルから AI アシスタンスを開くには、リクエストを右クリックして [AI に質問] オプションを選択します。
![[AI に質問] がハイライト表示されたリクエストのコンテキスト メニュー。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/network/open-context-menu.png?hl=ja)
このように AI アシスタンスを開くと、選択したネットワーク リクエストが会話のコンテキストとして事前に選択されます。
または、カーソルを合わせたネットワーク リクエストの横にあるフローティング ボタンをクリックします。
会話のコンテキスト
AI アシスタントとのチャットは、[ネットワーク] パネルのリクエスト リストで現在選択されているネットワーク リクエストに関連しています。このリクエストへの参照がパネルの左下隅に表示されます。
[ネットワーク] パネルで別のリクエストをクリックして、コンテキストを変更します。
AI アシスタントは、リクエスト URL、ヘッダー、タイミング、リクエスト イニシエータ チェーンを使用して質問に回答します。
重要: 機密情報が含まれる可能性のあるヘッダーは自動的に編集されます。
会話を開始した後、Analyzing network data チップの 展開ボタンをクリックすると、AI アシスタンスで使用される生データが表示されます。
![[ネットワーク データの分析] チップがハイライト表示された AI アシスタンス パネル。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/network/data-usage.png?hl=ja)
パフォーマンスの AI アシスタンス
パフォーマンスの AI アシスタント パネルを使用して、パフォーマンス パネルで記録されたパフォーマンス プロファイルを把握します。
[パフォーマンス] パネルから AI アシスタンスを開く
[パフォーマンス] パネルから AI アシスタンスを開くには、まずパフォーマンス プロファイルを記録します。
調査する内容に応じて、個々のパフォーマンス分析情報から [**AI アシスタンス**] パネルを開くか、パフォーマンス トレース ビューのアクティビティから開くことができます。
パフォーマンス分析情報
[分析情報] タブで、**LCP by phase などの分析情報を開いて、[AI に質問]** ボタンをクリックします。
![LCP パフォーマンスの分析情報の下にある [AI に質問] ボタンがハイライト表示されている。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/performance/ask-ai-performance-insights.png?hl=ja)
DevTools で [AI アシスタンス] パネルが開き、このパフォーマンス分析情報が会話のコンテキストとして事前に選択されます。
パフォーマンス トレース ビュー
トレースビューから AI アシスタンスを開くには、アクティビティを右クリックして [AI に質問] オプションを選択します。
![[AI に質問] がハイライト表示されたアクティビティのコンテキスト メニュー。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/performance/open-context-menu.png?hl=ja)
この場合、このアクティビティは会話のコンテキストとしてあらかじめ選択されています。
会話のコンテキスト
選択したパフォーマンス アクティビティは、AI アシスタンスとの会話のコンテキストとして使用されます。このアクティビティへの参照は、パネルの左下隅に表示されます。
パフォーマンス分析情報
特定のパフォーマンス分析情報に対して [AI に質問] をクリックした場合、この分析情報が選択されたコンテキストとして表示されます。他の分析情報の [AI に質問] をクリックすると、選択内容を変更できます。
会話を開始したら、Analyzing insight: ... セクションを開いて、AI アシスタンスで使用される元データを表示します。
トレースビュー
パフォーマンス トレースで別の項目を選択すると、コンテキストがそれに応じて変化します。
AI アシスタントは、選択したコールツリーのタイミングを使用してプロンプトに回答しています。
会話を開始した後、Analyzing call tree チップの ボタンをクリックすると、AI アシスタンスで使用される元データが表示されます。
![[呼び出しツリーを分析しています] チップがハイライト表示された AI アシスタンス パネル。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/performance/data-usage.png?hl=ja)
ソースの AI アシスタンス
[AI アシスタンス] パネルの [ソース] を使用して、ウェブサイトで読み込まれて使用されているファイルを把握します。
[ソース] パネルから AI アシスタンスを開く
ソースパネルから AI アシスタンスを開くには、ファイルを右クリックして [AI に質問] オプションを選択します。
![[AI に質問] がハイライト表示されたファイルのコンテキスト メニュー。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/files/open-context-menu.png?hl=ja)
このように AI アシスタンスを開くと、選択したファイルが会話のコンテキストとしてあらかじめ選択されます。
または、ファイルにカーソルを合わせたときに表示されるフローティング ボタンをクリックします。
会話のコンテキスト
選択したファイルは、AI アシスタンスとの会話のコンテキストとして使用されます。このファイルへの参照は、パネルの左下に表示されます。
[ソース] パネルで別のファイルをクリックして、コンテキストを変更します。
AI アシスタントは、選択したファイルの名前、URL、ソースマップ（利用可能な場合）、コンテンツを使用して質問に回答します。
会話を開始した後、Analyzing file チップの ボタンをクリックすると、AI アシスタントで使用される生データが表示されます。
![[ファイルを分析しています] チップがハイライト表示されている AI アシスタンス パネル。](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/files/data-usage.png?hl=ja)
会話フロー
プロンプトを送信すると、スタイリング エージェントとの会話が開始されます。エージェントは、プロンプトに最適な回答に必要な情報を取得するために、ウェブ API を呼び出す JavaScript を生成して実行します。エージェントの進捗状況がステップごとに表示されます。最初のステップのステータスは Investigating… です。
エージェントが質問を解決するために具体的なアクションを実行すると、ステップラベルが更新されます。
エージェントが最終的な回答に到達すると、回答が調査ステップの下に表示されます。フォローアップ プロンプトの提案も表示されます。
会話を続けるには、候補のプロンプトのいずれかをクリックします。 をクリックします。
調査ステップのログを調べて、AI アシスタンスがバックグラウンドで何を行ったかを把握します。
進行状況チップを展開すると、エージェントが実行したコードとその戻り値が表示されます。実行されたコードをコピーして、コンソール パネルで実行するなど、後で使用します。
一時停止中の会話
AI アシストは、副作用のあるコードを生成する可能性があります。この場合、コードが実行される前に会話が一時停止します。
会話が一時停止したら、エージェントが提案したコードを確認します。[ 続行] をクリックして続行するか、[キャンセル] をクリックして実行を停止します。
ワークスペースの変更を保存する
接続されたワークスペース フォルダを使用すると、AI アシスタンスによって提案されたスタイルの変更を、パソコンの CSS ソースファイルに保存できます。
手順は次のとおりです。
まず、メタデータ ファイルを生成し、ワークスペース フォルダを接続します。
または、フォルダを手動で追加することもできます。
[要素] パネルからチャットを開始します。
AI アシスタンスに CSS の変更を指示します。
AI アシスタンスがコードを生成し、実行を一時停止する場合があります。コードを確認し、[続行] をクリックして変更をライブでテストします。
[保存されていない変更] セクションを開き、[ワークスペースに適用] をクリックします。
diffで変更内容を確認し、[すべて保存] をクリックします。
このワークフローについては、以下をご覧ください。
回答なし
AI アシスタンスは、さまざまな理由で回答を提供しない場合があります。
プロンプトが AI アシスタンスで議論できる内容であると思われる場合は、バグを報告してください。
会話履歴
会話を開始すると、以降の回答はすべて、ユーザーと AI の間の過去のやり取りに基づいて生成されます。
AI アシスタンスはセッション間で会話履歴を保存するため、DevTools や Chrome を再読み込みした後でも以前のチャットにアクセスできます。
パネルの左上にあるコントロールを使用して、会話履歴を管理します。
新たに測定
現在選択されている会話コンテキストで新しい会話を開始するには、ボタンをクリックします。
続行
過去の会話を続けるには、[] ボタンをクリックし、コンテキスト メニューから選択します。
削除
履歴から会話を削除するには、ボタンをクリックします。
回答を評価してフィードバックを提供する
AI アシスタントは試験運用中の機能です。そのため、回答の質と全体的なエクスペリエンスを改善する方法を把握するために、皆様からのフィードバックを積極的に求めています。
回答に投票する
回答の下にある （高く評価）ボタンと （低く評価）ボタンを使用して、回答を評価します。
回答を報告する
不適切なコンテンツを報告するには、投票ボタンの横にある [] ボタンをクリックします。