Development and Debugging with GWT and Javascript

Java code is the bread and butter of what I do, but as most Java developers know, there is a plethora of good frameworks and technologies that surround Java and provide a means to build very powerful and extendable software.

Lately, I've popped back into GWT land and have been dealing with lots of Javascript, both original and generated. I originally introduced myself to GWT building a small volunteer information submittal form for Brevard Rescue Mission. This tiny application only scratched the surface of what GWT could do in its earliest stages. The magic that the Pentaho development team have performed with Pentaho Dashboarding is a new level of web-goodness, fully capitalizing on the power of GWT. I've been dabbling in the chart rendering layers of dashboards, and have learned some simple, effective means of making life a bit easier when dealing with debugging and developing Javascript and GWT generated Javascript. I hope you find these tips useful, and it's certainly nice to have them aggregated in one place! I have to give credit for this info to Nick Baker and Mike D'Amour, two of my colleagues at Pentaho. Use this blog post as a starting point for googling the original sources for more details on each tip:)

Helpful tips for Developing and Debugging with GWT & Javascript in General

Limit the user.agent Property

GWT compiling is resource intensive due to the number of compilations that happen for the browsers supported. At times, you will run out heap space or other resources before the compile can finish (this usually manifests itself as a StackOverflowError).

The following entries in your *.gwt.xml file can help by only compiling for the single browser you may be testing on:

<inherits name="com.google.gwt.user.UserAgent"/> 
  <set-property name="user.agent" value="ie6" />

Valid values for the user.agent property are: ie6,gecko,gecko1_8,safari,opera

Limit the gwt.compile.localWorkers

You can also scale back the number of threads to use for running parallel compilation. While this may hurt performance, you will be able to finish the compilation without running out of resources. This property, gwt.compile.localWorkers, can be added to the compile option in your ant script.

Bump the GWT version from 1.6.4 to 1.7.0

GWT 1.7.0 seems to have resolved many of the compilation resource issues with GWT.

GWT Pretty Print Compile

By default, we obfuscate our GWT compiled Javascript. To debug readable GWT compiled Javascript, compile with pretty print turned on. This property, gwt-style, can be added to the compile option in your ant script. Valid values include OBF, PRETTY, and DETAILED.

IE Javascript Debugging Help

If you need to debug Javascript in IE, it is highly recommended that you get IE8. You can install IE8 for the duration of your testing, then uninstall it when you no longer need it, as it has conflicts with GWT. IE8 has a new set of features called Developer Tools that make debugging Javascript very easy.

Helpful In Line Javascript Alerts

You can use the following line of code to send alert windows whereever you like in your Javascript code:

$wnd.alert("Hello World")

A good example from Nick:

This is literally saving me hours. By adding a line to the the end of the
printStackTrace() function you can alert out the stacktraces that normally do nothing when compiled.

Open up the gwt script file (xxxxxxxxxxxxxxxxxxxxxxxxx.cache.html) for your particular browser. I find it by seeing what's loaded in firebug.

Search for "function $printStackTrace"

Add a new line right before the function returns:

$wnd.alert(msg.impl.string);

It should now look like this.

function $printStackTrace(this$static){
var causeMessage, currentCause, msg;
msg = $StringBuffer(new StringBuffer());
currentCause = this$static;
while (currentCause) {
causeMessage = currentCause.getMessage();
if (currentCause != this$static) {
msg.impl.string += 'Caused by: ';
}
$append_4(msg, currentCause.getClass$().typeName);
msg.impl.string += ': ';
msg.impl.string += causeMessage == null?'(No exception detail)':causeMessage;
msg.impl.string += '\n';
currentCause = currentCause.cause;
}
$wnd.alert(msg.impl.string);
}

In Code Breakpoints

Rather than sifting through the script debugger window trying ot figure out where to put a breakpoint, you can use the following line of code to embed a breakpoint:

debugger;

Feel free to comment and send your favorite tricks for working with GWT and Javascript.