Firefox 3とFirebugで始めるJavaScript開発

第4回 ブレークポイントによるデバッグとFirebugのこれから

この記事を読むのに必要な時間:およそ 2 分

変数の監視

さて,今度は変数の監視を行います。

Scriptタブ右窓のWatchタブに「New watch expression...」という欄があり,そこに監視したい変数を入力することができます。

今回は,次のサンプルスクリプトのグローバル変数xとyを監視してみますex02.html)⁠

リスト2 ex02.htmlの抜粋

var x;
var y;
function Point(x,y){
        return new Array(x,y);
}
YAHOO.util.Event.on(window, "load", function() {
        YAHOO.util.Event.on('exec', 'click', function(){
                var result = Point(3,6);
                x = result[0];
                y = result[1];
        });
});

「New watch expression...」という部分をクリックすると,値を入力できるので「window.x」⁠window.y」と入力してみてください図9)⁠

図9 監視したい変数の入力

図9 監視したい変数の入力

入力し終わると,これらの変数はまだ定義されていないため,次のように表示されると思います図10)⁠

図10 監視中の値

図10 監視中の値

それでは次のように,xとyに値を挿入する部分をブレークポイントに設定してください図11)⁠

図11 ブレークポイントの設定

図11 ブレークポイントの設定

そしてスクリプトを実行すると,Watchタブが次のように表示されます。

図12 変数の監視

図12 変数の監視

これにより,関数内におけるブレークポイントでもグローバル変数の参照を行うことができます。

Firebug拡張アドオン「YSlow」

さて,Firebugにはそれを拡張してくれるためのFirefox拡張機能が存在しています。

今回はその中でもパフォーマンス評価を行ってくれる「YSlow」という拡張について簡単な紹介を行いたいと思います。

YSlowとは

YSlowとは,Yahoo! Inc.によって開発された,Firebug拡張のためのFirefox拡張機能で,ウェブサイトの総合的なパフォーマンスについて測定と評価を行ってくれます。

インストール

アドオンの配布サイトより,Firefoxへインストールをクリックし,インストールします図13)⁠

図13 YSlowのインストール

図13 YSlowのインストール

YSlowのインストールが完了すると,再起動を要求するので再起動しましょう。 再起動が完了すると,Firefoxのウィンドウの右下に次のような表示がでていると思います図14)⁠

図14 YSlowインストール後

図14 YSlowインストール後

この右下のYSlowのアイコンをクリックすると,パフォーマンスの測定が開始されます。次のスクリーンショットはhttp://www.yahoo.com/での実行例です図15)⁠

図15 YSlowでのパフォーマンス測定結果

図15 YSlowでのパフォーマンス測定結果

このようにYSlowでは,そのウェブサイトのパフォーマンスについて13の項目による鑑定結果より,Performance Gradeというのを割り出してくれます。それぞれの項目の詳細についてはYahoo! Developer Network blog: performance Archivesを是非読んでみるとよいでしょう。

そのほか,StatsやComponentsより,いろいろな情報を参照できるので,興味のある人は使ってみてください。

Firebugのこれから

本連載ではFirefox 3ベータ 3+Firebug 1.1 ベータという組み合わせでFirebugの紹介を行ってきましたが,現在,Firebugは1.2の開発に注力しており,Firefox 3ではFirebug 1.2の利用が推奨されています。

Firebug 1.2はつい最近ベータ版がリリースされましたが,まだ正常に動作しない部分もあります。ただ,頻繁にアップデートされているため,Firefox 3でFirebugを利用する場合は,ベータ版である,ということを注意しておけば,Firebug 1.2を利用するのがよいでしょう。

無理にFirefox 3を使う必要のない人はFirefox 2+Firebug 1.0がもっとも安定しており,本連載で紹介したAPIや各種機能の基本的な部分に変化はないため,それらを利用するのがよいでしょう。

まとめ

Firebugはデバッグはもちろんのこと,JavaScript実行インターフェースやHTML+CSSのデバッグ,ブラウジングツールとしても非常に優秀な拡張機能です。

便利なツールのため,近年のJavaScript開発におけるデファクトスタンダードになりつつありますが,具体的なデバッグ方法に関する情報はまだまだ少ないのが現実です。本連載で紹介してきたデバッグ手法を元に,もっと手軽なデバッグのしかたを見つけたり,こんな機能や使い方を発見した!ということがあれば,是非アウトプットをしてみてください。

本連載をきっかけにFirebugに関する様々な情報が今まで以上にアウトプットされることを期待しています。

著者プロフィール

堀邦明(ほりくにあき)

徳山工業高等専門学校卒業後,ヤフー株式会社に入社。Yahoo! JAPAN トップページのフロントエンドエンジニアとして主にJavaScript,PHPによる開発を行う。

また,個人の活動として,JavaScriptに関するオンライン上のイベント「Roppongi.JS」の企画・主催を行う。

コメント

コメントの記入