【ハウツー】Webデバッガに新星登場!? 操作を記録し、イベント/DOMを一発解析 - FireCrystal (2) 実際に使ってみよう! | 開発・SE

【ハウツー】

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

2 実際に使ってみよう!

富田宏昭　 [2009/09/14]

印刷

先頭
前へ
- 1
- 2
- ／2

では実際にFireCrystalを使用してみよう。jQueryを使用し、簡単なJavaScriptを使ったWebページを作成する。

hello_firecrystal.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello, FireCrystal!</title>
<script src="./js/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<!--

$(document).ready
(
    function()
    {
        $("input[name='text']").keyup
        (
            function()
            {
                $("#typingText").text(this.value);
            }
        );

        $("select[name='color']").change
        (
            function()
            {
                $("#typingText").css("color", this.value);
            }
        );

        $("input[name='bgColor']").change
        (
            function()
            {
                $("body").css("background-color", this.value);
            }
        );
    }
);

-->
</script>
</head>

<body style="color: #888888">
    <h1>Hello, FireCrystal!</h1>

    <p>
        Text:
        <input name="text" type="text" value="">
    </p>

    <p>
        Color:
        <select name="color">
            <option value="#000000" selected>#000000</option>
            <option value="#ff0000">#ff0000</option>
            <option value="#00ff00">#00ff00</option>
            <option value="#0000ff">#0000ff</option>
            <option value="#ffffff">#ffffff</option>
        </select>
    </p>

    <p>
        Background-color:
        <input name="bgColor" type="radio" id="bgWhite" value="#ffffff" checked>
        <label for="bgWhite">: #ffffff</label>
        ,
        <input name="bgColor" type="radio" id="bgBlack" value="#000000">
        <label for="bgBlack">: #000000</label>
    </p>

    <p>
        You typed: <span id="typingText"></span>
    </p>
</body>

</html>

ユーザの操作にしたがって文字色や背景色が変わるサンプルだ。それぞれに設定したイベントは次のとおり。

Text: 入力した文字列を画面下部の「You typed:」に続けて表示。onkeyupイベント発生時に動作
Color: 「You typed」に続けて表示する文字列の色を変更する。onchangeイベント発生時に動作
Background-color: 背景色を変更する。onchangeイベント発生時に動作

hello_firecrystal.htmlをFirefoxで開くと、次のような画面が表示される。


Firefoxでhello_firecrystal.htmlを表示。テキストボックスやラジオボタンなどを操作すると、それぞれに対応した動作がおこなわれる

このファイルをFireCrystalを使用してデバッグしてみよう。右下のアイコンをクリックして、記録開始だ。

解析結果が表示された直後の画面。左側にWebページ、右側にInitial DOM, JavaScript, CSSが表示される

操作結果は画面下部に時系列に表示される。カーソルをあてることで、「どのようなイベントが発生したか」「どのようなDOM操作がおこなわれたか」がバルーンで表示される。


どのようなイベントが発生し、どのようなDOM操作がおこなわれたかをバルーンで表示してくれる。DOMが変更された瞬間を示している黄色のバーをクリックすると、DOM操作の瞬間がアニメーションで表示される

また、右下の5つのアイコンをクリックすることで順にどのような操作がおこなわれたかを再生してくれる。

アルファ版という位置づけということもあり、動作の安定性に欠ける部分があるものの(筆者の環境では残念ながら真ん中の再生ボタン(?)をクリックしても動作しなかった)、なかなか有用なアドオンと言えるのではないだろうか。バグの再現手順があらかじめわかっている場合、そのとおりに操作をおこなうだけで裏側でどのような処理がおこなわれているかを一発で解析できるのはじつに頼もしい。これからの動向にぜひ注目したいところだ。