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のコードのいっしょくたに表示されているため、目的のものを見つけにくい。