HaxeやTypeScriptで使えるソースマップが便利。

JavaScriptを吐く言語を使う場合、ソースマップを使うとデバッグが楽ですよ。

ソースマップを使うとJavaScriptが実行エラーを起こしたときに、JavaScriptの行番号じゃなくってHaXeやTypeScriptの行番号が表示されるようになります。

こんな感じ。

これでまた一つJavaScriptを直接書く理由がなくなりますね。

ブラウザの設定

Chromeだとプラグインなしでこの機能が使えます。

方法

F12を押すと、Webインスペクタが開きます。その右下に設定ボタンがあるので、それをクリック。Enable source mapsにチェックを入れます。

コンパイルの設定

ソースマップを使うにはブラウザの設定だけじゃなく、.js.mapのファイルが必要です。HaXeやTypeScriptでは、このファイルをコンパイル時に生成するように設定できます。

HaXeの場合

コンパイラオプション-debugを使う

haxe -js script.haxe.js -main Main -debug

TypeScriptの場合

コンパイラオプション-sourcemapを使う

tsc script.ts -sourcemap

参考

Source debugging in Javascript – Haxe
Using Source Maps with TypeScript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です