= Super Dev Modeでのデバッグ =

(Classic)Dev Modeでのクライアント側コードのデバッグはEclipseのデバッガがそのまま使えた。これはGWT用のブラウザ側プラグインがよろしくやってくれたからのようだ。
しかしこのプラグインは、かなり以前に開発停止になってしまい、現在のブラウザのバージョンには対応していない。

現在のブラウザ用のGWTアプリを作成するには、Super Dev Modeを使わざるをえないのだが、これはブラウザ(ChromeでもFirefoxでも）に用意されているJavaScriptコードのデバッガを使うらしい。
そしてsourceMapという機能で、実行中のJavaScriptコード（これはCodeServerからブラウザに送られる）を、元のJavaソースコードに対応づけることができるらしい。

== サーバコードのデバッグ ==

その前にサーバコードのデバッグについてみてみる。サーバ側のコードは通常のJavaプログラムとして動作するので、ごく普通のJavaのデバッグと同じ。
(Classic)Dev ModeでもSuper Dev Modeでも変わりがない。単にEclipseのデバッガを使えばよい。

== クライアントコードのデバッグ ==

クライアントコードはEclipseのデバッガではデバッグできないので、Eclipseのデバッガを走らせようと、通常の実行を行おうと同じ。
サーバコードもあわせてデバッグしたいときはEclipseのデバッガで走らせればよい。

=== Chromeでのデバッグ ===

現在の最新版 54.0.2840.87 m を使う。

Eclipse上でsampleプロジェクトを起動し、現れたURL「http://127.0.0.1:8888/Sample.html」をchromeに指定する。

==== デベロッパーツールの表示、sourceMapとステップ実行 ====

chromeの画面で右クリックして「検証」を選択するか、あるいはF12キーを押す。デベロッパーツールが表示される。

このとき、Eclipseのコンソールには
{{{
GET /sourcemaps/sample/4F6FB530C38549BB4F377CC069BC03C7_sourcemap.json
   sent source map for module 'sample' in 16 ms
}}}
などという表示され、デベロッパーツールの表示と共に、sourceMapが取得されていることがわかる。

上部のElements, Console, Sources, Network, Timeline, Profiles ....というメニューの中のSourcesを選択する。

左側の
{{{
top
  127.0.0.1:8888
    sample
  ....
}}}

という表示の一番下の方を開いていくと、sample/client/Sample.javaというソースがある。

{{{
		class MyHandler implements ClickHandler, KeyUpHandler {
			/**
			 * Fired when the user clicks on the sendButton.
			 */
			public void onClick(ClickEvent event) {
				sendNameToServer();
			}
}}}

というコードがあるので、sendNameToServer()の行番号を右クリックし、「Add breakpoint」する。

その後で、アプリのSendボタンを押すと、この行で実行が停止する。あとは左下側にある「Step Over」「Step Into」「Step Out」等のボタンを使ってステップ実行する。

==== トレースメッセージの表示と例外時動作 ====

次に、元のコードを少々いじってみる。sendNameToServer()を削除し、以下にする。

{{{
		class MyHandler implements ClickHandler, KeyUpHandler {
			/**
			 * Fired when the user clicks on the sendButton.
			 */
			public void onClick(ClickEvent event) {
				GWT.log("before exception");
				throw new RuntimeException("EXCEPTION!");
			}
}}}

これを実行し、デベロッパーツール上部メニューのConsoleを開くと、上記のメッセージと例外メッセージが表示されることがわかる。

=== FireFoxでのデバッグ　===

49.0.2を使用。

chromeとほぼおなじ、URLを表示したら、ブラウザ画面を右クリックで「要素を調査」か、あるいはF12キーを押す。インスペクタなるものが開く。

chromeと同じで、インスペクタが開くと同時に、Eclipseのコンソールでは

{{{
GET /sourcemaps/sample/E245BB732289122E09C3EFE892662E12_sourcemap.json
   sent source map for module 'sample' in 14 ms
}}}
が表示され、sourceMapがロードされることがわかる。

他のchromeとほとんど同じだが、ソースコードの表示はchromeの方がわかりやすい。なぜなら、Firefoxでは自分開発のコードだけではなく、GWTやJavaのコードのいっしょくたに表示されているため、目的のものを見つけにくい。