コンソール分析情報でエラーと警告をより深く理解する

Yang Guo
Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

要件

コンソール分析情報機能を使用するには、次の要件を満たす必要があります。

  • 18 歳以上で、サポートされている地域に居住している。
  • Chrome バージョン 125 以降を使用している。
  • Google アカウントで Chrome にログインしていること。
  • DevTools の [設定] > [設定] > [外観] > [言語] で [英語（米国）] が選択されている。

    言語設定の場所...

    DevTools の言語設定。
  • DevTools でコンソール分析情報を有効にしている。

コンソール分析情報を有効にする

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

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

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

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

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

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

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

    プルダウン メニューの取得に失敗したときにコンソールに表示されるエラー。

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

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

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

    コンソール分析を初めて起動する場合は、設定で機能をオンにするよう求められます。

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

    AI によって生成されたエラーの説明。

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

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

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

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

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

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

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

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

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

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

既知の問題

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

説明が正しくない

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

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

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

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

プロンプト挿入の例。