| Deletions are marked like this. | Additions are marked like this. |
| Line 24: | Line 24: |
|
==== デベロッパーツールの表示、sourceMapとステップ実行 ==== |
|
| Line 55: | Line 57: |
|
==== トレースメッセージの表示と例外時動作 ==== |
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というソースがある。
public void onClick(ClickEvent event) {
sendNameToServer();
}というコードがあるので、sendNameToServer()の行番号を右クリックし、「Add breakpoint」する。
その後で、アプリのSendボタンを押すと、この行で実行が停止する。あとは左下側にある「Step Over」「Step Into」「Step Out」等のボタンを使ってステップ実行する。