Ajax わざとエラーを出してブラウザで原因を調べる方法。

Ajax は、基本的にテキストエディタでプログラミングして、Webブラウザで確認する手順を繰り返します。Ajaxの中心となる技術はJavaScriptですが、統合開発環境がないため少し不便です。

逆に言うとAjaxは、テキストエディタさえあればプログラミングができてしまいます。しかもブラウザはどのパソコンにも標準でインストールされているので、すぐに実行することができます。ただブラウザだけではエラーの原因がわかり難いことが欠点です。

このAjax初心者入門講座で Firefox を使う理由の一つは Firebug が使えることです。 Firebug を使えば、エラーの原因がすぐにわかるので、デバッグを効率よく行なうことができます。

プログラミングにバグは付き物です。プログラミング初心者はエラーが出るとパニックになりますが、原因を特定して一つ一つ解決していけば大丈夫です。

今回はわざとプログラムを間違えてエラーを出してみましょう。エラー原因をブラウザで調べる方法がわかれば、エラーが出ても落ち着いて対応できます。


【1】「test.js」の13行目をわざと間違えます。result → resalt

resalt.innerHTML = "a + b = " + c;

ajax-144.gif

変更したらファイルを保存してください。


【2】まず Internet Explorer6.0 で「test.html」を開きます。

*「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html

ajax-145.gif

JavaScriptのプログラムが間違っているので、ブラウザの画面には何も表示されません。またエラーメッセージも出ていません。これでは何が原因なのかわかりませんね。


【3】次は Firefox で「test.html」を開きます。

ajax-151.gif

ブラウザの画面に何も表示されないのは同じですが、画面右下のステータスバーにエラーメッセージが表示されています。


【4】エラーメッセージをクリックします。

ajax-152.gif


【5】Firebug が起動して、エラーの内容と行番号が確認できました。

ajax-147.gif

実際にはこの情報をもとにデバッグしていきます。Firefox の方がデバッグに便利なことがわかったと思います。


【6】「test.js」の13行目を元に戻してください。忘れないでくださいね。


【解説】

実は Internet Explorer でもある程度のエラーメッセージは表示されます。

以下は別のプログラムで、わざとエラーが出るようにした状態です。Internet Explorer のステータスバーに警告アイコンが表示されます。ダブルクリックすると、

ajax-153.gif

エラーメッセージが表示されます。
ajax-149.gif


【ワンポイント】

Firefox は日々改良されています。更新があると以下のようなメッセージが表示されるので、「Firefox を今すぐ再起動」ボタンをクリックして更新してください。

ajax-150.gif

作業中なら「後で」ボタンをクリックすると、Firefox を次回起動時に更新できます。


スポンサード リンク

スポンサード リンク






Ajax初心者入門講座TOPへ