管理画面や接客サービスのエラーを確認する時などに、ブラウザのデベロッパーツール内のコンソールで発生しているエラーを確認する必要がある場合があります。

ブラウザのデベロッパーツールの表示方法は、ご利用のブラウザによって異なります。ここでは、Google Chromeを例に説明します。

Chromeの場合

コンソールの表示方法

  • ページ内で右クリックからメニューを開き、「検証」を選択します

  • デベロッパーツールのElementsタブが開かれます

  • タブをConsoleに切り替えます

スクリーンショット 2021-11-01 20.33.37

エラーメッセージの確認方法

  • エラーが発生している場合、赤文字でエラーメッセージが表示されます

    • エラーメッセージの内容はエラーの重要な手がかりの1つです。ぜひスクリーンショットを撮りましょう

スクリーンショット 2021-11-01 20.39.25

  • ただし、全てのエラーが即座に問題につながるわけではなく、無視してもよいエラーも存在します

エラーの発生箇所の確認方法

  • エラーメッセージの右のリンクをクリックします

スクリーンショット 2021-11-01 20.39.25

  • minifyされている場合は、左下の{}ボタンを押します

スクリーンショット 2021-11-01 20.41.54

  • すると、JavaScriptエラー発生しているコード上の箇所がハイライトされます

    • エラー発生箇所も重要な手がかりの1つです。ぜひスクリーンショットを撮りましょう

スクリーンショット 2021-11-01 20.42.08