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

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

Posted at July 31,2013 12:55 AM
Tag:[Error, JavaScript]

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

1.はじめに

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

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

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

  • Google Chrome
  • Firefox
  • IE

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

2.エラーになる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>

3.Google Chromeの場合

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

(クリックで拡大)
Google Chromeの設定

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

(クリックで拡大)
JavaScriptエラーメッセージ

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

リンク

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

エラーが発生している行

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

コンソールを閉じる

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

4.Firefoxの場合

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

(クリックで拡大)
Firefoxボタン

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

(クリックで拡大)
エラーコンソール

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

(クリックで拡大)
エラーコンソール

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

(クリックで拡大)
エラーが発生している行

5.IEの場合

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

開発者ツール

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

コンソール

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

JavaScriptエラー

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

リンク

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

エラーが発生している行

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

コンソールを閉じる

以上です。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)