FirebugでAjaxMailの中のJavaScriptをデバッグ

11.開発日記 JavaScript Firefox


JavaScriptのエラーにはほんと悩まされますよね。
返ってくるエラー表示が訳分からないんだもの。


そこをFirebugで、カンタン解決です。



Firebugの簡単な使い方

今開発しているサイトの公開準備のため、InternetExplorerで確認していました。
すると「ページでエラーが発生しました」というお約束の表示を発見。

ライン:5
文字:2
エラー:オブジェクトを指定してください。
コード:0


んー。
これだけじゃさっぱりわかりません。
だからJavaScriptのエラーは嫌いなんです。


いい方法を示していただいている記事もあったのですが


▽JavaScriptデバッグ技法（たたみラボ）
　http://www.tatamilab.jp/rnd/archives/000106.html


なんとなく原因を発見することができませんでした。
そこでやむなくFirefoxのプラグイン、Firebugを使います。


もちろんそれまでも、開発者必携のプラグインということは存じてました。
しかしFirefoxが重くなるのを避けるため、導入するプラグインは必要最小限に留めていたのですよ。
とはいえ、四の五のいってられませんので、導入します。



冒頭の写真にある、Firebugのページの「Firefoxへインストール」ボタンをクリックしてインストールします。


▽Firebug :: Firefox Add-ons
　https://addons.mozilla.org/ja/firefox/addon/1843



インストールに成功すると、右下にFirebugのアイコンが表示されます。
なんか虫は虫でも、某Gにみえるのがなんなのですが……（＞＜。。


アイコンの上で右クリックすると、メニューが表示されます。
ここで「すべてのパネルを有効化」と「すべてのWebページで有効」にチェックを入れます。


その上でアイコンの上で左クリックすると、Firefoxの画面下半分に以下のようなウィンドウが重なって表示されます
（別ウィンドウにすることもできます）


この状態で、確認したいウェブページを開きます
（既に開いている場合はリロードします。その前にキャッシュを消しておくといいでしょう）。
すると読み込んだファイルについて、以下のような表示がでます。


css等も含めてページのサイズや読み込み時間を測定するPingdom Toolsと同じような表示です。
これだけでも、とても便利です。どのファイルの読み込みにどれくらい時間がかかったか視覚的に把握できますからね。


しかしよく見ていただくと、下の方に「1個のエラー」と表示されています。
これをクリックすると、エラーの内容が具体的に表示されます。

[＋]Spry.Widget.ValidtionTextarea is not a constructor
new Spry.Widget.ValidationTextarea("Che...maxChars:5000,validateOn:["change"]});\r\n


この[＋]ボタンをクリックすると、AjaxMailで使われているcheck.jsの4行目でエラーがでている旨表示されます。
おお、具体的！


JavaScriptだけでなくhtmlやCSSについても同じように確認でき、その場で修正して再確認もできるといいますから、本当に便利です（サーバには反映されません）。
確かにこれはウェブサイト開発者必携のプラグインですね。


AjaxMail ver1.2を確認してみる

check.jsの内容は以下のようなものでした。

window.onload = function() {
new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]});
new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]});
new Spry.Widget.ValidationTextarea("checkText3",{minChars:10, maxChars:5000,validateOn:["change"]});
}


実はFirebugで確認する前に、check.jsに原因があるらしいことは既に把握していました。
これらのファイルで呼び出しているJavaScriptを全て一度外し、一個ずつ加えていったところ、check.jsのところでエラーがでたからです。


しかしAdobeのページでSpryの説明をみて確認しても、記述に問題がある様子はうかがえません。


▽文字カウンタの追加（Spry）
　http://livedocs.adobe.com/ja_JP/Spry/1.4/WS621B74CF-152D-443b-AD7C-F9073FBC9ED6.html


そこで"AjaxMail ver1.2 UTF-8版（最新版）"を再度ダウンロードしてきて、一切カスタマイズしてない状態でサーバにアップロードし直しました。


待っている間、暇なので（うちの接続環境はイー・モバイルの契約をした際についてきた無料ADSLなので遅いのですよ）、他の方法でFirebugをいじってみた次第です。



・　Firebugではcheck.jsという全くいじっていないファイルでエラーがでた
・　アップしなおした"AjaxMail ver1.2 UTF-8版（最新版）"のサンプルで動作させても同様のエラーがでる


以上の結果から、"AjaxMail ver1.2 UTF-8版（最新版）"にそもそも問題があるのではないかとあたりをつけました。


そこで4行目の「ValidationTextarea」について検討しようと思いましたが……アーカイブ中にValidationTextareaがありません（あれ？）。
改めて公式サイトをみると、【IE6】と【AdobeSpry】のバグについてという記載があり、ValidationTextareaを1.2で外したことがうかがえます。


念のため、AjaxMail ver1.1 UTF-8版をみたところ、そこにはSpryValidationTextarea.jsが入っていて、check.jsはそのままでした。


つまり、ver1.2にした際、SpryValidationTextarea.jsを抜いて、サンプルのhtmlからは指定を抜いたものの、check.jsから外すのを忘れてしまったがために生じたエラーということのようです。


4行目を削除することで、エラーは表示されなくなりました。

結論

JavaScriptは自分で書けないため、エラーにたいして強い苦手意識があったのですが、Firebugのお陰でカンタンに解決しました（Firebugにたどり着くまでに大変時間がかかりましたが）。
Firebugは読込時間の表示等、他にも有用な機能があるので、アンインストールせず、今後とも使っていこうと思います。