« ブログ記事タイトルをランダムに表示させる MovableType5

アクセスランキングを表示してみる MovableType5 »

エラーメッセージを表示させる JavaScript

JavaScriptで起きたエラーに対処するためには、エラーメッセージを表示させる必要があります。各ブラウザでどのように表示をされるのか紹介します。

今回使用するソースコード

今回は下記のソースコードを使用します。アラートに「Hello World !!」と表示させる、お勉強用でおなじみのソースコードです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Hello World</title>
<script type="text/javascript">
//<![CDATA[
  window.alert('Hello World !!); //エラー箇所
//]]>
</script>
</head>
<body>
</body>
</html>

ただし、文字列を表す「'(シングルコーテーション)」が抜けている記述ミスがあり、ブラウザで実行するとエラーになります。さて、各ブラウザでこのエラーに対するメッセージを表示確認するにはどうしたらいいのかやってみましょう。

FireFox でエラーメッセージを表示

FireFoxで表示させてもJavaScriptの構文エラーが起きているのでアラート表示はされません。そしてその構文エラーに対するエラーメッセージもでません。

FireFoxで表示

エラーの確認方法

メニューバーの[ツール]→[エラーコンソール]でエラーメッセージを表示します。

エラーコンソールを表示させる

エラーコンソール画面にエラー内容が表示されます。

エラーコンソール画面

エラーリンクをクリックすることで詳細箇所が表示されます。

エラーの詳細箇所

FireBug でエラーメッセージを表示

FireFoxの拡張機能であるFireBugでのエラー確認方法。

FireBugを表示させ、[コンソール]タブを表示させます。もしここでコンソールが無効化されていたら、有効化します。

コンソール無効化時

コンソールを有効化した直後はエラー内容を表示しませんので、ページを再読み込みしましょう。

コンソールタブでエラー表示

エラーコンソールの時と同様にエラーリンクをクリックすることで詳細箇所を表示します。

Internet Explorer でエラーメッセージを表示

Internet Explorerで表示させると、ページ下部にあるステータスバーの左にエラーが起きていることを表す「!」アイコンが表示されています。

IEで表示してみる

エラーの確認方法

「!」アイコンをクリックするとエラーメッセージを表示します。

エラーメッセージ

エラーメッセージ内の[詳細表示]ボタンを押すとエラー箇所を指摘してくれます。

エラー箇所を表示

ページ表示と同時にエラーメッセージを表示させる場合は、メニューバーの[ツール]→[インターネットオプション]を選択します。

インターネットオプションを表示

「詳細設定」タブのブラウズカテゴリにある[スクリプトエラーごとに通知を表示する]にチェックを入れます。

インターネットオプションの設定

ただ、この設定を行うとエラーを見つけるたびにエラーメッセージが表示されるので、インターネット閲覧時には非常に鬱陶しいです。制作時のみチェックを入れたほうがいいと思います。

Safari でエラーメッセージを表示

Safariで表示させてもJavaScriptの構文エラーが起きているのでアラート表示はされません。そしてその構文エラーに対するエラーメッセージもでません。

Safariで表示

エラーの確認方法

[Safari設定アイコン]→[メニューバーを表示]を選択します。

メニューバーを表示

メニューバーの[編集]→[設定]を選択します。

Safariの設定

[詳細]アイコンをクリックして表示される画面の[メニューバーに"開発"メニューを表示]にチェックを入れます。

Sメニューバーに開発メニューを表示

メニューバーの[開発]→[エラーコンソールを表示]を選択します。

Safariでエラーコンソールを表示

リソーストラッキングの画面が表示された場合は[常に有効]を選択して[リソーストラッキングを有効にする]ボタンを押してください。

リソーストラッキングを有効にする

エラーコンソールアイコンを選ぶとエラーメッセージが表示されます。

エラーコンソールアイコン

エラーリンクをクリックするとエラー内容の詳細を表示できます。

id065.JPG

Google Chrome でエラーメッセージを表示

Google Chromeで表示させてもJavaScriptの構文エラーが起きているのでアラート表示はされません。そしてその構文エラーに対するエラーメッセージもでません。

Google Chromeで表示

エラーの確認方法

[Google Chrome設定アイコン]→[ツール]→[JavaScriptコンソール]を選択します。

JavaScriptコンソール表示

JavaScriptコンソールが表示され、エラーメッセージを確認できます。エラーリンクをクリックすることで詳細箇所を表示します。

JavaScriptコンソール