A Hero is Born

Recently, I've had the opportunity to have a bit of a play with GWT's upcoming and excitingly titled "Super Dev Mode".

Super Dev Mode will eventually replace the current plugin based development mode that GWT developers will no doubt be familiar with. Google's main reasoning for replacing the original development mode seems to be focussed on the difficulty of developing and maintaining the necessary browser plugins. However, they do list a number of other tantalising advantages:

  • Debugging on mobile phones and tablets will be made much simpler.
  • Improved performance debugging javascript heavy code.
  • No need to recompile for multi-page apps.

On the flip side though, currently Super Dev Mode has only been tested in Chrome and Firefox and there are still some stability issues and other bugs that are yet to be ironed out.

Learning to Fly

All this sounds great! So, how do we use it?

That's where things start to get a little tricky. Super Dev Mode is still only available to those using the GWT 2.5 Release Candidate, and there is very little official documentation about it and how to use it.

In the end, I found that the easiest way to use Super Dev Mode was via the Maven GWT Plugin which, in typical Maven fashion, makes life much much simpler.

The first step is to download the GWT 2.5.0.rc1 SDK and to install it to a sensible place. You can add the SDK to Eclipse via the dialogue in Window > Preferences > Google > Web Toolkit, which will ensure that your eclipse projects play nicely with it.

Next, we need to bump the version of the Maven GWT Plugin (or add it if you're not currently using it). Add the following to your project's POM dependencies.

<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-user</artifactId>
    <version>2.5.0-rc1</version>
    <scope>compile</scope>
</dependency>

And add the following to the plugins section (or update the version if you have it already):

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>gwt-maven-plugin</artifactId>
    <version>2.5.0-rc1</version>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>

A quick build should pull in your new dependencies. Now, we're ready to enable Super Dev Mode. By default it is disabled due to its experimental nature. Add the following to your module.xml file:

<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>

While we're in the module.xml file, there is a quick gotcha that caught me out. Super Dev Mode will not work if you have any <script> dependencies in your module.xml file. To get around this, just move these scripts to the HTML page that you're GWT application will be running on (make sure that the imports are before the GWT import though!).

Our project will now be built with the latest GWT version and Super Dev Mode has been enabled. The next step, is to actually run it! Navigate to the root of your project using the command prompt, and run the following, replacing the module with the fully qualified name of your application's GWT module:

mvn gwt:run-codeserver -Dgwt.bindAddress=0.0.0.0 -Dgwt.module=com.your.project.goes.here.ModuleName

This will start CodeServer which will host your application's code. If all was successful, you will get a message telling you that the codeserver is ready, and it will provide a URL for you to visit. Do as it suggests, and follow the instructions on the page to create your Super Dev Mode bookmarklets.

Finally, visit a page that contains a GWT module, and click the "Dev Mode On" bookmarklet, and click compile.

If there are no listed modules to be recompiled, then the chances are you are using the compiled nocache.js file. Super Dev Mode requires the hosted nocache.js file to be able to run. The quickest and easiest way I have found to ensure that you're running the hosted version is to launch standard dev mode in Eclipse, and then hit the url that standard dev mode is running on. This forces the hosted nocache.js file to be copied across, allowing you to recompile it successfully with your Super Dev Mode bookmarklet.

You are now running Super Dev Mode!

Fighting Crime

So, now we have Super Dev Mode running, what can we actually do with it? This next bit assumes you are running Google Chrome as your browser of choice. Open up the development tools (F12, or Ctrl+Shift+i). Ensure that you have Source Maps enabled by clicking the settings 'cog' in the bottom right hand corner, and checking the relevant check-box. Refresh your page and visit the script tag. If everything has gone as it should, you should see a list of all the the Java source for your application. From here you can place breakpoints, step through code and inspect the values of variables, just like you can in your standard IDE debugger.

While you play with it, you'll begin to realise the potential of this tool. It enables you to inspect generated code files (e.g. UIBinder files), and step through JSNI methods, which is not possible using a standard debugger. However, the disadvantages are that you cannot inspect fields, and it is more difficult to navigate through code files (at least, in Chrome, the layout of the files is currently poor - but this may improve with time).

Hopefully, this has given a bit of insight in how to set up Super Dev Mode and, if you have had a chance to play with it, you can see the potential a tool like this has. However, it is a little tricky to set up, which may put some people off. In some cases, it may be worth waiting for a little bit more support to become available before switching away from the standard development mode.

Its the Dev Mode we deserve, but not the one we need right now.