Firebug - web development evolved

Firebugの開発版に「Break On Next」または「Break On」と呼ばれる新機能が追加された。これは既存のデバッグ機能であるブレークをさらに拡張するもので、Webアプリケーション開発を支援する便利な新機能として注目される。Firebug 1.5b1以降で利用できる。

Software is hard - Firebug 1.5: Break On Nextで、「Break On Next」または「Break On」の機能概要が紹介されている。既存のブレーク機能はソースコードの特定のポイントにマークをつけておき、実行がそのポイントに到達したらプログラムの実行を一時停止するというもの。その段階で関連する変数の値を調べたり、ステップバイステップで処理を進めながら、実際にどういった処理が行われているかを調査することでデバッグをおこなう。現在実施されているデバッグ機能のもっとも基本となる機能といえる。

この方法の問題は、大きなアプリケーションになってきた場合、アプリケーションの振る舞いとソースコードの関係がわからない限り、最初のブレークポイントが設定できないということだ。「Break On Next」または「Break On」はこれに対処するための機能で、たとえば「このボタンが押されたら一時停止する」とか「このネットワーク通信がはじまったら一時停止する」ということができるようにするためのもの。Firebug 1.5b1ではScript、HTML、Net、Consoleのパネルに対して機能が実装されており、それぞれ次のような機能を持っている。

パネル Break On Next/Break Onの機能
Script セットポイントの次の実行ポイントで一時定期
HTML セットしたHTML対象が変更された段階で一時停止
Net セットしたXMLHttpRequestが実行された段階で一時停止
Console セットしたJavaScriptエラーが発生した段階で一時停止

「Break On Next」または「Break On」を試すためのデモページも用意されている。Firebug 1.5b1以降をインストールしたFirefox 3.5+でFirebug Breakpoints Feature Demo Pageにアクセスすれば、提供されている機能を一通り試せるようになっている。ただし執筆現在では、デモページは説明とスナップショット画像が食い違っている部分や動作しないデモもあるため、利用する場合には注意が必要。

JavaScriptソースコードにBreak On Nextをセット

実行されたコードの次のコードで一時停止する

エラーメッセージにBreak Onをセット

対象となるソースコードにジャンプ

ネットワーク通信Break Onをセットに

対象となるソースコードにジャンプ

「Break On Next」または「Break On」のUIは一時停止ボタンとして提供されている。一時停止ボタンをクリックするとアイコンが点滅をはじめ、この点滅している間は「Break On Next」または「Break On」機能が動作するようになる。今後のバージョンでCSS、イベントハンドラ、エクステンションに対しても同機能が提供され、Firebug 1.5の目玉機能のひとつになるとみられる。