これは面白い！ Webアプリを開発する際に注目を集めているフレームワークBackbone。あまり厚くない仕組みになっているので理解はしやすいのですが、それでも開発時には色々難問にぶつかることがあります。そこでDevtoolsのような開発ツールが役立ちます。 さらにそれを一歩進めてBackbone専用に特化させたのがBackbone-Eyeになります。Firebug専用のツールになっており、Firefoxに元々含まれている開発ツールでは動きませんのでご注意ください。

インストール

インストールはMozilla Add-onsから行えます。Firebugも忘れずにインストールしましょう。

インストールしたらBackboneアプリケーションを開きます。

使い方

こちらはサンプルのBackboneアプリケーションです。Firebugを開きます。

Firebugを開くとBackbone-Eyeのタブが追加されているのが分かるかと思います。

デフォルトでは無効になっていますので有効にします。

一例。ビューの状態が確認できます。

シーケンス図まで表示されます。

該当部をハイライトで来ます。

データをツリー上で確認できます。

コレクションのデータも確認できます。

複雑なシーケンス図もこの通り分かりやすい表示に。

確かにBackboneではモデルやビューの状態が肝になっている気がしますので、シーケンス図によってどのように処理が行われているか分かれば開発効率が良さそうです。意外とハマりどころが多いBackboneだけに専用のデバッガーがあればいちいちconsoleに出力する必要がないので便利そうです。

デモ動画は下記になります。ご覧ください。

思ってみればFirefoxにぞっこんになったのはFirebugの登場によってJavaScriptの開発がスピードアップした時だったかもしれません。各ブラウザも開発ツールを実装している中、さらにフレームワーク限定で動作する機能を実装してくるのは憎らしいですね。Backboneアプリケーション開発の際にはぜひ使ってみてください。 Backbone-EyeはFirefox用のオープンソース・ソフトウェア（Simplified BSD 2-Clause）です。 Backbone debugger for Firebug. Backbone-Eye :: Add-ons for Firefox dhruvaray/spa-eye