【ハウツー】

Webデバッガに新星登場!? 操作を記録し、イベント/DOMを一発解析 - FireCrystal

1 FireCrystalとは

 
  • <<
  • <

1/2

複雑な機能をいくつも実装した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をクリックすると、記録が開始される。

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

  • <<
  • <

1/2

インデックス

目次
(1) FireCrystalとは
(2) 実際に使ってみよう!


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

声優・久保ユリカ、2ndシングル「SUMMER CHANCE!!」を8/17リリース! 東京・池袋で発売記念お渡し会を開催
[00:57 9/1] ホビー
Acer、世界初の曲面ディスプレイ搭載21型ゲーミングノートPC
[00:44 9/1] パソコン
ASUS、本体厚8mmのUSB Type-C対応15.6型モバイル液晶「ZenScreen」
[00:40 9/1] パソコン
Acer、エントリーモデルのAndroidスマホ「Liquid Z6」と「Liquid Z6 Plus」
[00:31 9/1] スマホとデジタル家電
緊急入院の志村けん、退院を報告「皆さんに心配掛けました」
[00:30 9/1] エンタメ

求人情報