GWT SuperDevMode with Maven

GWT had for some time now an alternative to ‘classic’ dev-mode which is called a super-dev-mode. It differs significantly to the classic one in the sense that is much closer to the ‘real’ java script debugging in the browser without native hooks to the IDE like classic dev-mode does. This has many advantages and a few disadvantages as well. I won’t dwell into these (google it if you wonder) but it is more natural way to debug your code in the browser because that’s where it actually runs – NOT in the JVM like dev-mode (that always felt a bit like cheating).

So first of all, here come the steps to enable it.

1. In your module(s) you want to run, add these lines:

<!-- Super-dev mode stuff, redirect should be false in production! -->
<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<!-- if you use script tags in gwt.xml, so let linker not be disturbed by that -->
<set-configuration-property name='xsiframe.failIfScriptTag' value='FALSE'/>

2.(optional) You might want to clean your project and re-compile it with the new linker enabled. Remove unitCache stuff and such.
3.Add GWT maven plugin to your pom.xml (if it’s not already there)

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>gwt-maven-plugin</artifactId>
    <version>${gwt.version}</version>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <useCache>false</useCache>
        <runTarget>index.html</runTarget>
        <webappDirectory>src/main/webapp</webappDirectory>
    </configuration>
</plugin>

4. Run SuperDevMode code server in bash like:

mvn process-classes gwt:run-codeserver

Flag ‘process-classes’ is due to a bug still present in 2.6.0 release of GWT but this is to be rectified in next release (rumors are, that’s it). You should get a lot of output that should conclude in something like:

[INFO] The code server is ready.
[INFO] Next, visit: http://localhost:9876/

So naturally, that’s what we do, visit that page, bookmark the two ‘buttons’ -> ‘Dev mode ON’ and ‘Dev mode OFF’. These are used to (de)activate codeserver. You can ‘drag-n-drop’ these on the bookmark tab.
5. Run you application in tomcat/jetty/jboss which will run (if you run locally) typically at localhost:8080/ or something like that. Go there and do what you have to do e.g. login or just open the site. Then activate your codeServer by clicking on the Dev Mode On bookmark, click on the ‘compile’ button if needed and that’s it! Your client side code will be handled by the SuperDevMode web server and the backend stuff by the application container.

Firefox has already deprecated the native (netscape) API:s that broke the google plugin for mozilla and google has announced that it will do the same thing for Chrome sometime in 2014. These means that classic dev-mode will eventually stop working and the only way to continue using it will be to keep the older version of browser(s) on your computer. This is hardly feasible in the long run. Hopefully, the SuperDevMode will be polished and developed in the newer releases of GWT and provide better and simpler developing/debugging possibilities. It’s still a bit buggy but it works. By enabling source maps in the chrome settings, it’s i possible to break in the Java code and also inspect it in the browser debug window. This is great stuff. Next stop? Read more on chrome debugging here:

Debug in Chrome