Closure Inspector - Closure Compilerを使う！

トップページ >

Closure Inspector

Closure InspectorはFirefoxのエクステンションであるデバッガFirebugのエクステンションです。Closure InspectorはFirebugに強力な3つの機能 - ソースマッピング、改良されたスタックトレース、ユニットテストとの統合 - を追加します。ここではClosure Inspectorのインストール手順とその利用法について説明します。

• このページは公式サイトのこちらを元に作成しました。

目次:

インストール

Closure Inspectorの動作には Firefox 3.x とFirefoxのエクステンションである Firebug 1.4 以上が必要です。

Closure Inspectorのインストール手順は以下のとおりです：

1. もしまだFirebugをインストールしていないのなら、http://getfirebug.comからダウンロード・インストールを行ってください。
2. Closure Inspector XPIをダウンロードします。もしそのファイルをどう処理するのかブラウザから尋ねられた場合は、Download（「ファイルを保存する」）を選択してください。Closure Inspectorのインストール方法は他のFirefoxエクステンションと同じで、ダウンロードの完了後、そのファイルをFirefoxのウィンドウにドラッグ・アンド・ドロップするだけです。

以上です。Closure Inspectorのインストールが成功したかどうかをチェックするには、Firefoxの「ツール」メニューから「アドオン」を選択し、表示されるリスト内にClosure Inspectorが存在しており、かつ有効になっていることを確認してください。

Closure InspectorはFirebugの拡張であるため、その動作はFirebugの仕様に依存します。Firebugの新しいバージョンはClosure Inspectorが正しく動作しなくなる原因となりえます。このためClosure Inspectorは起動時にFirebugのバージョン番号をチェックし、それが新しい未知のバージョンであった場合は自身を無効化して、何が起きたのかを説明するメッセージを表示します。あなたがFirebugの新バージョンをインストールするときには、そのバージョンに対応したClosure Inspectorの新しいバージョンが利用可能になっていないか、リポジトリを確認してみてください。

ソースマッピング

Closure CompilerはオリジナルのJavaScriptを修正してより小さく効率的なコードを生成しますが、それは読みづらくデバッグしにくいものになります。Closure Inspectorのソースマッピング機能はコンパイルされたコードに対応するオリジナルコードの行番号を示すことで、この問題の解消を助けます。オリジナルのコードは $EDITOR 環境変数で設定されたエディタで表示することができます。

Closure Inspectorでソースマッピングを行う手順は以下のとおりです：

1. もしClosure Compilerをまだダウンロードしていないのであれば、こちらを参照してください。
2. JavaScriptコードを--create_source_mapオプション付きでコンパイルします。もしあなたのJavaScriptファイルが example.js という名前であれば、以下のコマンドを実行するとソースマップを内容とするファイル example-map がカレントディレクトリに作成されます：

   $ java -jar compiler.jar --js example.js --create_source_map ./example-map --js_output_file example-compiled.js

3. Firebugでコードをデバッグするため、 example-compiled.js を読み込むWebページをFirefoxで開きます。Firebugウィンドウを開き、左側のペインに example-compiled.js のソースを表示してください。次に右側のペインでSource Mappingタブを選択し、ソースマップファイル example-map のURLを指定するか、Open Local Fileリンクをクリックしてファイルパスを指定してください。
4. ソースマップファイルがロードされれば、コンパイルされたコードからオリジナルコードの位置を知ることができるようになります。それをするには、コンパイルされたコードの任意の位置を右クリックし、コンテキストメニューからShow Original Sourceを選択します。
   
   もしあなたが $EDITOR 環境変数にエディタを設定していれば、あなたがクリックした位置に対応するオリジナルソースがエディタで開かれます。もし $EDITOR 変数が設定されていなければ、オリジナルのファイル名と行番号が以下のようにポップアップされます：

   message
   Original Sounrce File: /closure-compiler/example.js
   Line Number: 5

改良されたスタックトレース

Firebugの右側のペインの「スタック」をクリックすると、スタックトレースを表示させることができます。

Closure Inspectorはこのスタックトレース表示を次のように強化しました：

• ソースマップが読み込まれていれば、オリジナルの関数名を表示します。
• 各関数が含まれるファイルを表示します。
• スタックトレーステキストをコピーするためのCopy Stackボタンを追加しました。

ユニットテストとの統合

Closure InspectorはClosure Testing Frameworkとの統合をサポートします。この機能を有効にするにはFirebugの「スクリプト」メニューの下向き矢印をクリックし、Handle JSUnit Failuresを有効にします。Closure Testing Frameworkのアサーションが失敗した場合、Closure Inspectorはアサーションの位置にブレークポイントをセットし、プログラムの実行を中断します。

Cajaとの連携

Closure InspectorはCajaが生成したコードをデバッグする機能を持っています。ただしこの機能はClosure Compilerとは直接関係ないため、ここでは詳しく触れません。下記のページを参照してください。

http://code.google.com/closure/compiler/docs/inspector_caja.html

---