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

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

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 アシスタンス を使用する方法について説明します。

スタイル設定の AI アシスタンス

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

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

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

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

または、カーソルを合わせた DOM ノードに付いているフローティング ボタンをクリックします。

会話のコンテキスト

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

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

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

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

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

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

ネットワークの [AI アシスタンス] パネルを使用すると、ウェブサイトから送信されたリクエストを把握できます。

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

[Network] パネルから [AI assistance] を開くには、 リクエストを右クリックして [Ask AI] オプションを選択します。

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

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

会話のコンテキスト

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

コンテキストを変更するには、[Network] パネルで別のリクエストをクリックします。

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

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

会話を開始したら、Analyzing network data チップの keyboard_arrow_down [Expand] ボタンをクリックすると、AI assistance で使用される生データを確認できます。

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

パフォーマンスの [AI アシスタンス] パネルを使用すると、[Performance] パネルに記録されたパフォーマンス プロファイルを把握できます。

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

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

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

パフォーマンス分析情報

[Insights] タブで、**LCP by phase** などの分析情報を開き、[**Ask AI**] ボタンをクリックします。

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

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

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

この場合、このアクティビティは会話のコンテキストとして事前選択されます。

会話のコンテキスト

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

パフォーマンス分析情報

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

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

トレースビュー

パフォーマンス トレースでさまざまなアイテムを選択すると、コンテキストがそれに応じて変化します。

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

会話を開始したら、 [button]Analyzing call tree チップの keyboard_arrow_down をクリックすると、 **AI アシスタンス** で使用される生データを確認できます。

ソースの AI アシスタンス

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

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

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

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

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

会話のコンテキスト

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

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

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

会話を開始したら、Analyzing file[チップ]のkeyboard_arrow_downボタンをクリックすると、AI アシスタンスで使用される生データを確認できます。

対話の流れ

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

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

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

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

をクリックすると、AI アシスタンスがバックグラウンドで実行した内容を詳しく把握できます。

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

一時停止した会話

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

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

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

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

手順は次のとおりです。

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

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

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

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

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

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

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

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

回答がない

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

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

会話履歴

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

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

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

新たに測定

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

続行

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

削除

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

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

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

回答に投票する

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

回答を報告する

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