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。ただし、ちょっとした裏技で一応使えるようになります。以下はその手順です。

ソースのコピー

 まず、自分のGWTアプリケーションのソースディレクトリ内にcom.google.gwt.core.linkerというパッケージを作成します。その後、com.google.gwt.core.linker.CrossSiteIframeLinkerのソースをコピーして先ほど作成したパッケージにペーストします。

ソースの修正

 先ほど作成したCrossSiteIframeLinkerの407行目の「out.print("\n//@ sourceURL=0.js\n");」をコメントアウトします。Mavenを使用している場合はgwt-dev-2.5.0を依存関係に追加してください。


以上で2.5.0でもソースマップを使うことが出きるようになります。ただし、無理やり感が否めないため何か副作用が発生する可能性は高いのでその点は注意が必要かと。

*1:2月3日時点ではまだリリースされていませんがこの数週間でリリースされると思います。