GWT2.5でソースマップを使ってデバッグする
前回のエントリーでSuper Dev Mode(以下SDM)の実行の仕方を書きましたが、SDMで開発する際のデバッグの方法としてソースマップを使うことができます。
ソースマップとは?
ソースマップとは最終的にJavaScriptにコンパイルして使う言語(CoffeScript、TypeScript等)をブラウザ上でデバッグしやすくする技術で、サーバー側にてCoffeeScript等の言語と実際のJavaScriptの紐付け情報をJSON形式でブラウザにダウンロードさせて、ブラウザ側でCoffeeScriptやTypeScript等のソースにブレークポイントをはってデバッグ出来るようにする技術です。通常、JavaScriptにコンパイルする言語はブラウザ側にてJavaScriptをデバッグしたとしても元々のコンパイル前のソースとは違う形になっているためデバッグがしづらいと言った問題がありましたが、この技術を使うことでデバッグがかなり楽になります。そしてGWT2.5からはGWTでもソースマップを使用して開発ができるようになっています。
GWTでのソースマップ
やり方は簡単で、SDMにてGWTアプリケーションを実行し、Chromeの開発コンソールを開きます。その後、開発コンソール上の右下にある設定ボタンをクリックし「Enable Source Maps」にチェックを入れ、画面の再ロードを行います。これによりソースマップが有効になります。あとは「Sources」タブを開けばJavaファイルの参照も行えるようになり、そのJavaファイルにてブレークポイントの設定などが出きるようになります。
GWT2.5.0でのソースマップ
上記でGWT2.5でもソースマップを使えると書きましたが、実際はバグにより2.5.0では使えず、2.5.1から使えるようになります*1。ただし、ちょっとした裏技で一応使えるようになります。以下はその手順です。
*1:2月3日時点ではまだリリースされていませんがこの数週間でリリースされると思います。