この記事で学ぶこと

JavaScriptで発生したのエラー・警告の確認方法
エラー・警告が起きているJavaScriptの特定方法

１．JavaScriptのエラー・警告の有無を確認する

まずはF12キーを押下して、ChromeのDeveloper Toolsを起動しましょう。
サンプルページとして、Qiitaのユーザー一覧ページ（未ログイン状態）を使いました。
この画像の中で、赤い矢印の先にあるアイコンを確認してください。

※プライバシー保護（？）のために、アイコンやユーザーIDは隠してあります。

拡大するとこんな感じ。

赤い方がエラーで、黄色い方が警告です。
それぞれ右隣の数字が、エラー・警告の数を表しています。
ここに何も表示されていなければ、エラーも警告もありません。

２．どこでエラー・警告が起きているのか特定する

２つの方法で、確認することが出来ます。
どちらも全く同じ内容ですが、ページの見え方が違います。

２－１．consoleタブを開く

先日紹介した【Chrome Developer Tools】実例で学ぶconsoleタブで出来ること～JavaScriptデバッグ編
にあるとおりです。
consoleタブには、console.logの出力結果だけではなく、JavaScriptのエラーや警告も表示されるんです
エラーの出力状況のサンプルはこちら

ちょっと見づらいですが、url_nameという変数がnullなので読み取れないと言ってますね・・・。

２－２．エラーや警告のアイコンをクリックする

先ほど確認したこのアイコン。

ここにマウスカーソルを当てると、クリックできます。
クリックしてみた結果がこちら

先ほどと見え方が変わってます。
consoleタブだけ独立して、もう１つ表示されました！
ただ、これ、警告のマークをクリックしても、警告には飛びません。
consoleの最終行が表示されるようになっています。
個人的には、小さくて見づらいので、２－１の方法を取ることが多いです。

どんなときに使えばいいのか

JavaScriptが思うように動かないときに、エラー・警告のマークを探してみてください。
JavaScriptはコンパイル言語ではないので、事前に文法ミスなどが見つけにくいです。
なので、とりあえずF12を押してエラー・警告のマークがあるかどうかを見るだけで、ぐっと解決に近づきます。

まとめ

JavaScriptが思ったように動いてないときはF12を押してエラー・警告アイコンの有無を確認する。

では、よいJavaScriptライフを