html5 canvas コンテンツを Haxe にて開発する場合、出力された javascript に対し Haxe ソースコード内のどの部分でエラーが発生したのか等の調査を行うにはソースマップを利用します。

　机上のにゅーろん: HaxeやTypeScriptで使えるソースマップが便利。
　http://spheresofa.net/blog/?p=733

一方、Flash コンテンツを Haxe にて開発する場合、FlashDevelop のデバッグ機能を利用すれば、出力された swf に対し Haxe ソースコード内のどの部分でエラーが発生したのかの調査が簡単に行えます。

エディタ IntelliJ IDEA にも Haxe アプリケーションのデバッグ機能もあるようなのですが、調べてみるも デバッガーの起動(接続)方法がわからず、調査は保留状態となっています。

手順

デバッグ用コンパイル

hxml ファイルを利用して Haxe ソースコードをコンパイルする場合、例えば以下のように記述します。

-swf9 trunk/fla/debug.swf
-main Main
-swf-version 11
-swf-header 550:400:24:000000
-swf-lib trunk/fla/view.swf
-cp trunk/src
-lib box2D
-debug
-D fdb

最後の -debug と -D fdb という二行を付け加えることにより、FlashDevelop にてデバッグ用 swf として利用できます。

hxml 記述完了後はコンパイルを行い、上記例の場合 debug.swf を出力しておきます。

FlashDevelop で swf を実行

私の場合 Haxe は IntelliJ IDEA にて開発を行なっているため、FlashDevelop の New Project から Haxe AS3 Project を選択し、IntelliJ IDEA で作成したプロジェクトディレクトリを Location に指定しています。

その後 Project ウインドウ上から debug.swf をダブルクリックする事で、debugger が起動しデバッグが可能になります。

trace 記述内容は Output ウインドウ内に表示されるようになり、Error が発生した場合、Error 発生箇所の Haxe ソースコードが表示されます。試しに swf 内画面をクリックすると Error を throw するようにしてみると、見事 Error 発生箇所がハイライトで表示されました。

[ FLASH ] [ tips ] 投稿者 siratama : 2013年04月09日 16:38