Debugging Google Web Toolkit (GWT) and App Engine in Intellij Idea

Here’s how to debug GWT (e.g. put breakpoints on the client code for GWT) on the local app engine server (to allow access to the embedded datanucleus DB) in Intellij IDEA 9.

Although these steps are for Intellij IDEA 9+GWT+App Engine, this method could also be used for other IDEs and app servers e.g. Weblogic, JBoss, Glassfish.

The fundamental concept is that the GWT dev mode is like a middle layer container that hosts and emulates the client side code. When the html is served from the app server, we need to tell the GWT javascript where the GWT dev mode container is. More information can be found here.

Step 1: Create GWT run configuration in IDEA

Under Shell Parameters, add “-noserver”. This is to notify the GWT dev container not to launch the built in jetty server, as we want to use our own app server.

Step 2: Create App Engine run configuration in IDEA

Under Port, change the number to “9001″ (or another available port,  and this port would be used in step 4)

Step 3: Run/Debug both the App Engine config and GWT config at the same time

Click Run/Debug for the App engine config.

Then click Run/Debug for the GWT config.

Step 4: Launch browser and update URL

From GWT Dev mode, click “Launch Default Browser”

A URL similar to this would be sent to the browser:

http://127.0.0.1:9001/eemlog.html?gwt.codesvr=127.0.0.1:9997

Update the port in Red - Port 9001: Refers to the backend server port configured in step 2 (in this case app engine)

Leave unchanged the portion “gwt.codesvr=127.0.0.1:9997″. The javascript referenced in eemlog.html will then lookup the GWT dev mode container on 127.0.0.1:9997.

Finally, test the setup with a breakpoint in the GWT client java code.

TAP

A blog about Technology, Architecture, Patterns and Security.