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