FirefoxのアドオンでJavaScriptをデバッグする -Firebug-

IEやFirefoxなどブラウザによってJavaScritpやCSSの挙動が違うので制作者としては実装や検証では頭痛の種だが、JavaScritpのエラーは行数で出るもののいったい何が原因なのか追究しづらいことがあり困っていたところ、Firefoxにはこれを解決してくれるアドオンが存在する。

"Firebug"という名のアドオンはFirefoxの公式サイトからダウンロードすることができ、そこへアクセスしているときのブラウザがFirefoxならそのままインストールすることができる。


今回はJavaScritpのエラー追跡の利用を紹介するが、"Firebug"にはGETやPOSTのやり取りを確認したり、画面遷移時のパラメータを偽装することでWebアプリのセキュリティホールを探したりと制作者にとっていたせりつくせりのツールだ。

(こんなツールがあるから脆弱性のあるサイトが攻撃されているという意見もあるが・・・)


さて、IEを使っていると「ランタイムエラー」やら下の画像のようにエラーなんだが何が悪いのかわからないポップアップが表示されることがある。

 エラーポップアップ


一応、エラーの場所らしきところは表示されるのだが、JavaScritpのファイルは外部ファイル化されていることが多く、その場合はその行数も含まれるので場所を特定するのが大変だ。

APIをインクルードして利用している場合はその行数も3桁どころか4桁になることもあるので尚更。


"Firebug"をインストールしたなら、アドオンのツールバーにあるゴキブリのようなアイコンをクリックすると各情報が表示される欄が出てくる。

 Firebug


タブの右端に「接続」があるので、まずはここで接続を有効にする。

この状態でサイト内のリンクをたどっていくと、画面遷移するごとにどんな通信をしたかが随時表示される。

そして同じタブ内の左端にある「コンソール」を選択するとデバッグが行える。

JavaScritptのエラーが出るページに差し掛かったところでコメントが表示された。

 エラー表示


なるほど、load()関数が無いのにload()と呼び出していたか。

今回はIEとFirefoxで出る初歩的なエラーだったので追跡できたが、中にはIEでは出るがFirefoxではエラーが出ないといったこともあるのでFirefoxだけに絞って動作検証するのはまだまだ危険だ。

それでも便利すぎるほどのツールには変わりない。

ブラウザに依存するような仕様にはしないことが一番好ましいのだが。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 6

なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス
かわいい かわいい

この記事へのコメント

この記事へのトラックバック