複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。

そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。

本稿では、そのFireCrystalについて紹介しよう。

FireCrystalとは

Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント発生・DOM操作がおこなわれたかを解析して、時系列で表示する。FireCrystalを使用すればJavaScriptの各所にブレークポイントをわざわざしかける必要もなく、記録開始ボタンを押す→操作をおこなう→記録停止ボタンを押すだけでどこでどのイベントが発生し、DOMの操作がおこなわれたかがわかるようになる。AjaxやDOM操作を多用する、複雑なWebアプリケーション上でのデバッグにはかなり嬉しい機能だ。

FireCrystalは現在、アルファ版として位置づけられている。大量のJavaScriptが埋めこまれているWebページでFireCrystalを使用すると、解析に時間がかかったりFirefoxごとクラッシュする場合があると公式サイトでアナウンスがされている。また一部の環境ではセグメンテーションフォルトを起こしてクラッシュする報告もあがっている。利用する際はくれぐれも注意されたい。

Hello, FireCrystal!

ここでの動作環境は次のとおり。

• OS: Mac OS X 10.5.8
• Firefox: 3.5.3

まずはさっそくインストールだ。FireCrystal :: Add-ons for Firefoxより、FireCrystalのインストールをおこなう。インストールに成功すると、Firefoxのステータスバー右部に「FireCrystal」のアイコンが表示される。

Firefoxのステータスバー右部に「FireCrystal」のアイコンが表示される。おもな操作はこのアイコンからおこなう

FireCrystalのアイコンをクリックすると、Recording Optionsが表示される。必要に応じて「Reload & record starting at page load」にチェックを入れてStartをクリックすると、記録が開始される。

記録開始前のオプションダイアログ。ページをリロードしてから記録を開始するかどうかを確認してから記録開始だ