ActionScript3のデバッグ方法

linux as3

ActionScriptのデバッグ方法として、

の二つについて調べてみました。

debugger を使う方法

Flex 3.0 SDK には fdb というdebuggerが付属しています。

インストール作業

fdb を使うには flashplayer のインストールが必要です．flashplayer は Flex 3.0 SDK に同梱されていて、以下の手順でインストールできます

$ tar xvfz flex/runtimes/player/lnx/flashplayer.tar.gz
$ sudo cp flashplayer /usr/bin
fdb の使い方

fdbを使って *swfをデバッグするためには、*swfにデバッグ情報を埋め込む必要があります。
デバッグ情報を埋め込むには、 mxmlc に -debug=true オプションを付与して*swfをビルドします。

Makefile に書くと以下のようになります．

MXMLC = /tmp/flex/bin/mxmlc
MFLAGS = -debug=true

TARGETS  = hoge.swf

all: $(TARGETS)

clean:
        $(RM) $(TARGETS)

.SUFFIXES:      .as .swf
.as.swf:
        $(MXMLC) $(MFLAGS) $<

デバッグ情報付きの *swf がビルドできたら、デバッガ経由で *.swf をオープンします。

$ fdb  hoge.swf

あとは gdb の使い方とだいたい同じです．よく使うコマンドとしては

  • ヘルプは "h"
  • プログラムの再開は "c"
  • ブレークポイントは "b 関数名"
  • source codeの確認は "list"
  • 変数の確認は "print 変数名"

となります。

また、emacs から fdb を起動することも一応できます。emacs 上で、

とするとfdbが起動するには起動しますが…イマイチです．

printデバッグをする方法

trace() を使う方法

続いて定番の printデバッグをする方法です。 ActionScript では printデバッグ用に trace() という関数が用意されています．使い方は以下のとおり

package {
    import flash.display.*;
    public class debug extends Sprite {
        public function debug () {
            trace("hello");
        }
    }
}

このようなソースを、先ほどインストールした flashplayer を使って実行すると、

$ flashplayer debug.swf
hello

コンソールに "hello" と出力されます．

ここで重要な点は、trace() は debugger 版の player や plugin でしか、正しく動作しない という点です。

playerやplugin には一般のユーザが使う通常版と、開発者向けの debbuger version の２種類があります。Debugger version のplugin/player は、

から入手できるので、trace()を使う場合はあらかじめDebug版をインストールしておく必要があります。ちょっと面倒ですね。

javascript と連携する方法

trace() 以外の方法として、*.swf から、ブラウザ側の javascript の関数を呼ぶ方法もあります。

コードは以下のようになります。

package {
    import flash.display.*;
    import flash.external.ExternalInterface;

    public class debug2 extends Sprite {
        public function debug2 () {
            ExternalInterface.call('alert', "message");
        }
    }
}

このコードでは、 javascript の alert() を呼び出して、"message" という文字列を表示させています。

firebugと連携する方法

前述の javascript と連携する方法を、発展させた方法として firebug と連携する方法があります。

firebug とは，firefoxのアドオンとして実装された web 開発環境です．アドオンなので実体は javascript で書かれています．
http://www.getfirebug.com/

前述の「javascriptと連携させる」方法を応用すると，この firebug のデバッグコンソールに actionscript のメッセージを出力することができます．


方法は、まず以下の手順で firebug を起動し、firebug のコンソールを開いておきます。

firebug のコンソールは，javascript側では consoleオブジェクトとして実装されています． コンソールに文字列を表示する場合は，javascript上で， consoleオブジェクトのlog() 関数を使い，

console.log("文字列")

とするようになっています。

そこで以下のようなコードを書けば、ActionScript3側から、firebugのコンソールへ文字列が出力できるわけです。

package {
    import flash.display.*;
    import flash.external.ExternalInterface;

    public class debug2 extends Sprite {
        public function debug2 () {
            ExternalInterface.call('console.log', "message");
        }
    }
}

また， firebugのconsole APIのドキュメントによると，log() は，printf のような書式付き出力も可能です．つまり %d や %s が使えます．こんな感じ．

ExternalInterface.call('console.log', "string is [%s]",  "abcde");

さらにこの方法を発展させた実用的なコードが以下のページで公開されています。
http://subtech.g.hatena.ne.jp/secondlife/20070219/1171872801

使い方は，

  • 以下のような hoge.as を用意して
package {
    import flash.display.*;
    import flash.external.ExternalInterface;

    public class hoge extends Sprite {
        public function hoge () {
            log("hello");
        }
    }
}

同じディレクトリに log.as を置いておけば、hoge.swf をビルドするに 明示的に log.as を指定する必要はありません。

あえて Makefile を書くならば以下のようになります

MXMLC = /tmp/flex/bin/mxmlc
MFLAGS = 

TARGETS  = hoge.swf

all: $(TARGETS)

clean:
        $(RM) $(TARGETS)

.SUFFIXES:      .as .swf
.as.swf:
        $(MXMLC) $(MFLAGS) $<

hoge.swf: log.as

大事なのは、最後の一行です。これで、 log.as か hoge.as が更新されたら、 mxmlc hoge.as が走って、 hoge.swf が更新されるようになります。