TopJavaScript > 2013年7月
2013年7月31日

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

July 31,2013 12:55 AM
Tag:[, ]
Permalink

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エラー

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

リンク

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

エラーが発生している行

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

コンソールを閉じる

以上です。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3