【コラム】イマドキのIDE事情 (67) オープンソースのFlashデバッガ「De MonsterDebugger」を試してみる | 開発・SE

【コラム】

イマドキのIDE事情

67 オープンソースのFlashデバッガ「De MonsterDebugger」を試してみる

竹添直樹　 [2009/10/19]

印刷

第1回
前回
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- ／155
次回
最新回

De MonsterDebuggerとは?

De MonsterDebuggerはAdobe AIRアプリケーションとして実装されたオープンソースのFlashデバッガだ。

ただし、デバッガといってもいわゆる一般的なソースコードレベルでのデバッガではなく、インスペクションツールに近いものだ。Flash、Flex、AIRに対応しており、コンポーネントの階層を表示したり、コンポーネントのプロパティを動的に変更することが可能だ。

De MonsterDebuggerのインストール

De MonsterDebuggerのWebサイトからAIRのパッケージをダウンロードすることができる。AIRランタイムがインストールされていればダウンロードしたairパッケージをダブルクリックするだけでAIRアプリケーションのインストーラが起動するはずだ。

De MonsterDebuggerを使用するにはデバッグ対象のアプリケーションのソースコードにクライアントクラスを組み込む必要がある。クライアントクラスのソースコードはDe MonsterDebuggerの[File]メニューから[Export Client Class]で生成することができる。nlというディレクトリが作成されるので、これをソースパスにコピーして使用しておこう。

Flex/AIRアプリケーションの場合はmxmlファイルに以下の記述を入れ、アプリケーションの初期化時にMonsterDebuggerオブジェクトを生成するようにする。MonsterDebuggerクラスがDe MonsterDebugger本体とLocalConnectionでFlash間通信を行うことでデバッグを可能としている。

<mx:WindowedApplication 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  ...
  initialize="init()">

<mx:Script>
<![CDATA[
import nl.demonsters.debugger.MonsterDebugger;

private var debugger:MonsterDebugger;

public function init():void{
  debugger = new MonsterDebugger(this);
  ...
}
]]>
</mx:Script>

また、Flashの場合であれば以下の通りだ。

package {

  import flash.display.Sprite;
  import nl.demonsters.debugger.MonsterDebugger;

  public class Main extends Sprite {

    private var debugger:MonsterDebugger;

    public function Main() {
      debugger = new MonsterDebugger(this);
      ...
    }
  }
}

以上で準備は完了だ。この状態でDe MonsterDebuggerとデバッグ対象のアプリケーションを起動すると以下のようにDe MonsterDebuggerは自動的にアプリケーション検出するはずだ。

De MonsterDebuggerの機能

De MonsterDebuggerが提供している機能について説明しておこう。De MonsterDebuggerの画面構成は図1のようになっている。

図1 De MonsterDebuggerの画面

画面のメイン領域にはアプリケーションのコンポーネント一覧が表示される。上部の検索ボックスで絞込み検索を行うことができる。

また、画面右端にはコンポーネント一覧で選択されたコンポーネントのプロパティやメソッドの一覧が表示される。プロパティの一覧ではプロパティの値を書き換えることも可能だ。書き換えた値は動作中のアプリケーションに即座に反映されるほか、メソッド一覧のでメソッドをダブルクリックすると引数を指定してメソッドを実行することが可能だ。

図2 メソッドの実行

画面下部にはActionScriptからMonsterDebugger.trace()で出力されたトレースログを一覧表示するための領域が用意されている。以下にトレースログの出力例を示す。文字列だけでなく、任意のオブジェクトを出力することが可能だ。

// 文字列を出力
MonsterDebugger.trace(this, "Hello World!");

トレースのエントリーをクリックすると詳細表示用のダイアログが開き、以下のようにオブジェクト構造が表示される。また、トレースされた内容は[File]メニューからXMLファイルとしてエクスポート/インポートを行うことが可能だ。

図3 トレースされたオブジェクト

画面の最下部にはモニタが配置されており、フレームレートとメモリ使用量を確認することができる。

まとめ

De MonsterDebuggerは、機能は限られており、利用にあたってはソースコードに手を入れる必要があるものの、手軽に利用することができるFlashデバッガだ。

De MonsterDebuggerが威力を発揮するのはFlash IDEでActionScriptを使用したアプリケーションを開発する場合だろう。Flexアプリケーションの開発で使用されるFlex Builderには高機能なグラフィカルデバッガが搭載されているが、Flash IDEにはデバッグ機能がない。また、De MonsterDebuggerはアプリケーション側にデバッガと通信するコードを埋め込むため、開発環境がなくても動作させることができるという特徴もある。

Flash開発のお供として覚えておきたいツールだ。