ほとんどのブラウザには、デベロッパー ツールが組み込まれています。これらのデベロッパー ツールには通常、コンソールが含まれています。コンソールには、現在実行中のページに関する情報が表示されます。
コンソールに記録されるメッセージは、ページを作成したウェブ デベロッパーまたはブラウザ自体から送信されます。すべてのコンソール メッセージには、重大度レベル（Verbose、Info、Warning、Error）があります。Error メッセージは、解決する必要があるページの問題があることを意味します。
Lighthouse ブラウザ エラー監査が失敗する仕組み
Lighthouse は、コンソールに記録されたすべてのブラウザ エラーを報告します。
ブラウザのエラーを修正する方法
Lighthouse が報告したブラウザ エラーを修正して、すべてのユーザーに対してページが期待どおりに動作するようにします。
Chrome DevTools には、エラーの原因を特定するのに役立つツールがいくつか用意されています。
- 各エラーのテキストの下に、問題のあるコードの実行を引き起こしたコールスタックが DevTools コンソールに表示されます。
- 各エラーの右上にあるリンクをクリックすると、エラーの原因となったコードが表示されます。
たとえば、次のスクリーンショットは、2 つのエラーがあるページを示しています。
この例では、最初のエラーは console.error() の呼び出しからウェブ デベロッパーによって発生しています。2 つ目のエラーはブラウザから返され、ページのスクリプトのいずれかで使用されている変数が存在しないことを示しています。
各エラーのテキストの下に、エラーが発生したコールスタックが DevTools コンソールに表示されます。たとえば、最初のエラーの場合、Console は (anonymous) 関数が init 関数を呼び出し、その init 関数が doStuff 関数を呼び出したことを示します。エラーの右上にある pen.js:9 リンクをクリックすると、関連するコードが表示されます。
このように各エラーに関連するコードを確認することで、考えられる問題を特定して解決できます。
エラーの原因がわからない場合は、エラー テキストを検索エンジンに入力してみてください。問題の解決策が見つからない場合は、Stack Overflow で質問してみてください。
エラーを修正できない場合は、try...catch ステートメントでラップして、問題に気づいていることをコードで明示的に示すことを検討してください。catch ブロックを使用して、エラーをより適切に処理することもできます。