小粋空間  -  a cheap joke and a play on words site

JavaScriptエラーを表示・確認する方法のまとめ

JavaScriptエラーを表示・確認する方法をまとめました。

１．はじめに

ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。

JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。

このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。

• Google Chrome
• Firefox
• IE

ビギナーの方向けの内容です。

２．エラーになるJavaScriptのサンプル

エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタックスエラーになります。

<script>
document.write("<a href="http://user-domain/">foo</a>");
</script>

なお、正しくは次のように全体をシングルクォーテーションで括るか、href属性部分のダブルクォーテーションをエスケープします。

<script>
document.write('<a href="http://user-domain/">foo</a>');
</script>

または

<script>
document.write("<a href=\"http://user-domain/\">foo</a>");
</script>

３．Google Chromeの場合

Google ChromeでJavaScriptエラーを表示・確認するには、ブラウザの一番右側にある「Google Chromeの設定」アイコンをクリックして、「ツール」→「JavaScriptコンソール」を選択します。F12キーでもOKです。

（クリックで拡大）

ブラウザの下半分にJavaScriptコンソールが表示されます。JavaScriptエラーが発生していれば、次のようなメッセージが赤く表示されます。表示されている内容からシンタックスエラーであることが分かります。

（クリックで拡大）

エラーが発生している箇所を見る場合は、JavaScriptコンソールの右側にエラーが発生しているページへのリンクが表示されるので、それをクリックします。

JavaScriptコンソールの左側にソースコードが表示され、エラーが発生している行が黄色で表示されます。黄色で表示されるのはリンクをクリックした直後だけです。

コンソールを閉じるには、右側にある×印のアイコンをクリックします。F12押下でも閉じれます。

最初の手順でF12キーでコンソールを開いた場合、そのあとで「Console」タブをクリックしてください。

４．Firefoxの場合

FirefoxでJavaScriptエラーを表示・確認するには、Firefoxボタンをクリックして「Web開発」→「エラーコンソール」を選択します。メニューバーを表示している場合は「ツール」→「Web開発」→「エラーコンソール」を選択します。

（クリックで拡大）

エラーコンソールが表示されます。JavaScriptエラーが発生していれば次のようなメッセージが赤く表示されます。エラーが発生している行の内容も分かります。

（クリックで拡大）

エラーが発生しているファイル全体を見る場合は、ページへのリンクをクリック。

（クリックで拡大）

ウィンドウが開いてエラーが発生したファイルの内容が表示されます。エラーが発生している行は反転した状態で表示されます。

（クリックで拡大）

５．IEの場合

IEでJavaScriptエラーを表示・確認するには、設定アイコンをクリックして「F12 開発者ツール」を選択します。F12キーを押下してもOKです。

ブラウザの下半分にコンソールが表示されるので「スクリプト」をクリック。

JavaScriptエラーが発生していれば次のようなメッセージが赤く表示されます。エラーが発生している行も分かります。

エラーが発生している箇所を確認するにはリンクをクリック。

コンソールの左側に表示されているソースの該当行にマーク（下図の左側の赤枠）がつき、ちょっと分かりにくいですが、該当のカラム位置でカーソルが点滅（下図の右側の赤枠）します。

コンソールを閉じるには、右側にある×印のアイコンをクリックします。

以上です。