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

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

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

[AI アシスタンス] パネルで Gemini と効果的にチャットするには、パネルを開く方法、プロンプト、会話フローを制御する方法を学習します。

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

[AI アシスタンス] パネルがドロワーに開きます。

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

[要素]、[ネットワーク]、[ソース]、[パフォーマンス] パネルから直接パネルを開くこともできます。要素またはリクエストを右クリックして [AI に質問] を選択します。

注: 次の方法で AI アシスタントを開く場合は、上記のように [会話のコンテキスト] を選択してください。

コマンド メニューから

コマンド メニューから AI アシスタンスを開くには、AI と入力し、[AI アシスタンスを表示] コマンドを実行します。このコマンドの横には [Drawer] バッジが表示されます。

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

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

プロンプト

新しい会話を開始するときに、AI アシスタントがプロンプトの例を提示し、すぐに作業を開始できるようにします。

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

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

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

無料のチャットボックスでは、「devtools を使用してアクセシビリティをデバッグするにはどうすればよいですか？」や「どのネットワーク リクエストが遅いですか？」などの高度な質問をすることができます。また、たとえば [ソース] パネルからファイルの一部をコピーしてチャットに貼り付け、その内容について質問することもできます。

注: 以前と同様に、[要素]、[ネットワーク]、[パフォーマンス]、[ソース] パネルで特定のコンテキストを選択できます。

スタイリング用の AI アシスタンス

[AI アシスタンス] パネルを使用して、ウェブサイトの全体的なレイアウトや特定の要素のスタイルを把握したり、CSS バグに対する AI 生成の修正を取得したりできます。

[要素] パネルから AI アシスタンスを開く

[要素] パネルから AI アシスタンスを開くには、DOM ノードを検査するときに、ノードを右クリックして [AI に質問] オプションを選択します。

このように AI アシスタンスを開くと、検査された DOM 要素がすでに会話のコンテキスト要素として選択されています。

または、ホバーした DOM ノードに付いているフローティング ボタンをクリックします。

会話のコンテキスト

AI アシスタントとのチャットは、常に現在検査中の要素に関連付けられます。これは、[要素] パネルの DOM ツリーで最後に選択された要素です。この要素への参照は、パネルの左下に表示されます。

現在の要素の横にある要素ピッカーを使用するか、[要素] パネルの DOM ツリーから選択して、コンテキストを変更します。

コンテキストを選択した状態で、ビューポートのスクリーンショットを撮影してチャットに送信できます。チャット入力フィールドの横にある photo_camera [スクリーンショットを撮る] ボタンをクリックします。

スクリーンショットを使用すると、プロンプトに視覚的なコンテキストを追加できます。たとえば、表示されているすべてのボタンの間隔が同じかどうかを確認できます。

現在検証中の要素が会話の基盤となりますが、AI アシスタンスはすべての Web API にアクセスして、検証中のページからより多くの情報を収集できます。これには、document.querySelector を使用した他の要素のクエリや、計算されたスタイルの評価が含まれます。

ネットワークの AI アシスタンス

[ネットワーク] の AI アシスタンス パネルを使用して、ウェブサイトから送信されたリクエストを確認します。

ネットワーク パネルから AI アシスタンスを開く

[ネットワーク] パネルから AI アシスタンスを開くには、リクエストを右クリックして [AI に質問] オプションを選択します。

このように AI アシスタンスを開くと、選択したネットワーク リクエストが会話のコンテキストとして事前に選択されます。

または、カーソルを合わせたネットワーク リクエストの横にあるフローティング ボタンをクリックします。

会話のコンテキスト

AI アシスタントとのチャットは、[ネットワーク] パネルのリクエスト リストで現在選択されているネットワーク リクエストに関連しています。このリクエストへの参照がパネルの左下隅に表示されます。

[ネットワーク] パネルで別のリクエストをクリックして、コンテキストを変更します。

AI アシスタントは、リクエスト URL、ヘッダー、タイミング、リクエスト イニシエータ チェーンを使用して質問に回答します。

重要: 機密情報が含まれる可能性のあるヘッダーは自動的に編集されます。

会話を開始した後、Analyzing network data チップの 展開ボタンをクリックすると、AI アシスタンスで使用される生データが表示されます。

パフォーマンスの AI アシスタンス

パフォーマンスの AI アシスタント パネルを使用して、パフォーマンス パネルで記録されたパフォーマンス プロファイルを把握します。

[パフォーマンス] パネルから AI アシスタンスを開く

[パフォーマンス] パネルから AI アシスタンスを開くには、まずパフォーマンス プロファイルを記録します。

調査する内容に応じて、個々のパフォーマンス分析情報から [**AI アシスタンス**] パネルを開くか、パフォーマンス トレース ビューのアクティビティから開くことができます。

パフォーマンス分析情報

[分析情報] タブで、**LCP by phase などの分析情報を開いて、[AI に質問]** ボタンをクリックします。

DevTools で [AI アシスタンス] パネルが開き、このパフォーマンス分析情報が会話のコンテキストとして事前に選択されます。

パフォーマンス トレース ビュー

トレースビューから AI アシスタンスを開くには、アクティビティを右クリックして [AI に質問] オプションを選択します。

この場合、このアクティビティは会話のコンテキストとしてあらかじめ選択されています。

会話のコンテキスト

選択したパフォーマンス アクティビティは、AI アシスタンスとの会話のコンテキストとして使用されます。このアクティビティへの参照は、パネルの左下隅に表示されます。

パフォーマンス分析情報

特定のパフォーマンス分析情報に対して [AI に質問] をクリックした場合、この分析情報が選択されたコンテキストとして表示されます。他の分析情報の [AI に質問] をクリックすると、選択内容を変更できます。

会話を開始したら、Analyzing insight: ... セクションを開いて、AI アシスタンスで使用される元データを表示します。

トレースビュー

パフォーマンス トレースで別の項目を選択すると、コンテキストがそれに応じて変化します。

AI アシスタントは、選択したコールツリーのタイミングを使用してプロンプトに回答しています。

会話を開始した後、Analyzing call tree チップの ボタンをクリックすると、AI アシスタンスで使用される元データが表示されます。

ソースの AI アシスタンス

[AI アシスタンス] パネルの [ソース] を使用して、ウェブサイトで読み込まれて使用されているファイルを把握します。

[ソース] パネルから AI アシスタンスを開く

ソースパネルから AI アシスタンスを開くには、ファイルを右クリックして [AI に質問] オプションを選択します。

このように AI アシスタンスを開くと、選択したファイルが会話のコンテキストとしてあらかじめ選択されます。

または、ファイルにカーソルを合わせたときに表示されるフローティング ボタンをクリックします。

会話のコンテキスト

選択したファイルは、AI アシスタンスとの会話のコンテキストとして使用されます。このファイルへの参照は、パネルの左下に表示されます。

[ソース] パネルで別のファイルをクリックして、コンテキストを変更します。

AI アシスタントは、選択したファイルの名前、URL、ソースマップ（利用可能な場合）、コンテンツを使用して質問に回答します。

会話を開始した後、Analyzing file チップの ボタンをクリックすると、AI アシスタントで使用される生データが表示されます。

会話フロー

プロンプトを送信すると、スタイリング エージェントとの会話が開始されます。エージェントは、プロンプトに最適な回答に必要な情報を取得するために、ウェブ API を呼び出す JavaScript を生成して実行します。エージェントの進捗状況がステップごとに表示されます。最初のステップのステータスは Investigating… です。

エージェントが質問を解決するために具体的なアクションを実行すると、ステップラベルが更新されます。

エージェントが最終的な回答に到達すると、回答が調査ステップの下に表示されます。フォローアップ プロンプトの提案も表示されます。

会話を続けるには、候補のプロンプトのいずれかをクリックします。 をクリックします。

調査ステップのログを調べて、AI アシスタンスがバックグラウンドで何を行ったかを把握します。

進行状況チップを展開すると、エージェントが実行したコードとその戻り値が表示されます。実行されたコードをコピーして、コンソール パネルで実行するなど、後で使用します。

一時停止中の会話

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

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

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

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

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

手順は次のとおりです。

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

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

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

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

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

5. [保存されていない変更] セクションを開き、[ワークスペースに適用] をクリックします。

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

6. diff で変更内容を確認し、[すべて保存] をクリックします。

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

回答なし

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

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

会話履歴

会話を開始すると、以降の回答はすべて、ユーザーと AI の間の過去のやり取りに基づいて生成されます。

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

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

新たに測定

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

続行

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

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

削除

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

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

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

回答に投票する

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

回答を報告する

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