Console の分析情報でエラーと警告を詳しく把握する

Yang Guo
Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Gemini に DevTools コンソール内で分析情報を提供してもらい、エラーと警告をより深く理解できます。

データの使用方法と既知の問題もご覧ください。

要件

Console Insights 機能を使用するには、次の要件を満たす必要があります。

  • 18 歳以上で、サポートされている地域に居住している。
  • Chrome バージョン 125 以降を使用している。
  • Google アカウントで Chrome にログインしていること。
  • DevTools の [] の [Settings] > [Preferences] > [Appearance] > [Language] で、[English (US)] を選択します。

    言語が地域を設定しています...

    DevTools の言語設定。
  • DevTools で[コンソール分析情報] を有効にします。

[Console Insights] をオンにする

コンソール分析情報をまだ有効にしていない場合は、この機能を初めて使用するときに有効にするよう求められ、 [設定] > [AI イノベーション] へのリンクが表示されます。[Console の分析情報] セクションを開き、考慮事項を読み、対応する切り替えボタンをオンにします。

設定の [Console Insights] 切り替えボタン。

切り替えボタンをオンにできない場合は、Google アカウントで Chrome にログインしていることを確認してください。

コンソール メッセージの説明を取得する

説明を取得するには、Chrome で次の操作を行います。

  1. こちらのデモページをご覧ください。
  2. DevTools を開くと、ページが検査されます。
  3. コンソールを開くと、コンソール メッセージが表示されます。

  4. デモページの検索ボックスをクリックします。プルダウン メニューの取得に失敗し、コンソールにエラーが表示されます。

    プルダウン メニューの取得に失敗すると、コンソールにエラーが表示されます。

  5. CORS エラー メッセージにカーソルを合わせます。エラー メッセージの右側に 電球の火花。 [このエラーについて] ボタンが表示されます。

    [このエラーを分析] ボタン。

  6. エラーの説明を表示するには、[電球の火花。 このエラーを分析] をクリックします。

    Console インサイトを初めて起動する場合、設定で機能をオンにするよう求められます。

  7. 数秒後、コンソール エラーの下に説明が表示されます。

    AI 生成によるエラーの説明。

Gemini が説明の生成に使用したデータを確認するには、[このメッセージの分析に使用されるデータ] セクションを開きます。

[このメッセージの分析に使用されるデータ] セクションが展開された状態。

説明が不十分と思われる場合は、[代わりに検索を使用] をクリックして、エラーの検索結果が表示された新しいタブを開きます。

データの取り扱いについて

この通知とプライバシーに関するお知らせでは、Chrome DevTools でのデータの取り扱いについて説明しています。よくお読みください。

Chrome DevTools は、コンソール メッセージ、関連するスタック トレース、関連するソースコード、関連するネットワーク ヘッダーを入力データとして使用します。[このメッセージを理解する] を使用すると、Google は入力データ、生成された出力、関連機能の使用状況に関する情報、フィードバックを収集します。Google ではこのデータを、Google Cloud などの Google の企業向けプロダクトを含め、Google のプロダクトやサービス、そして機械学習技術を提供、改善、開発する目的で使用します。

品質の向上とプロダクトの改善のため、上記の入力データ、生成された出力、関連機能の使用情報、フィードバックについて、人間のレビュアーが読み取り、注釈を付け、処理を行う場合があります。メッセージやフィードバックには、ご自身や他人を特定できるような機密情報（部外秘など）や個人情報を含めないでください。データは誰によって提供されたものかわからないように保存されるため、削除のリクエストに応じることはできず、最大 18 か月間保持されます。お使いの Google アカウントが組織によって管理されている場合、Google サービスの改善のためにデータを収集しないことがあります。

このメッセージの意味を理解する際に、次の点に注意してください。

  • Chrome DevTools は、コンソール メッセージ、関連するスタック トレース、関連するソースコード、関連するネットワーク ヘッダーを使用して回答を提供します。
  • Chrome DevTools は試験運用版の技術を使用しているため、Google の見解とは異なる不正確または不適切な情報が生成される場合があります。回答に投票して、この機能の改善にご協力ください。
  • この機能は試験運用版であり、将来変更される可能性があります。
  • 生成されたコード スニペットは慎重に使用してください。

この機能を使用するには、「このメッセージを理解する」の使用が Google 利用規約に従うことに同意する必要があります。

既知の問題

Chrome DevTools は、Google の大規模言語モデルを使用して説明を生成します。大規模言語モデル（LLM）は、新しい研究分野です。LLM が生成する回答は、疑問が生じた場合や、明らかに間違っている場合もあります。結果が不正確または誤解を招く可能性があるため、必ず再確認してください。

説明が正しくない

LLM は、ありそうでありふれたコンテンツを生成します。ほとんどの場合、このコンテンツには事実に基づいて有益な情報が含まれており、関連するコンテキストにおけるエラーや警告の理解に役立ちます。最新のウェブ開発とデバッグは、高度な複雑さを伴う困難な作業であり、習熟するには何年もの経験が必要です。LLM が生成する回答はもっともらしいように聞こえるものの、実際には誤解を招くものや、人間のウェブ デベロッパーにとって意味のない回答であることがあります。Google は、生成される分析情報の品質と正確性を継続的に改善するために最善を尽くしています。誤った説明を見つけた場合は、フィードバックをお送りください。

プロンプト インジェクション

多くの LLM アプリケーションは、プロンプト インジェクションと呼ばれる一種の不正行為の影響を受けやすいです。この機能も例外ではありません。LLM を欺いて、デベロッパーが意図していない指示を受け入れてしまう可能性があります。

次の無害な例をご覧ください。

プロンプト挿入の例。