Using GWT Super Dev Mode / Source Maps

August 24, 2013

Share

Tags

gwt sourcemaps

Updated with various improvements from Google+ comments

One of the biggest gripes I have run into with the Google Web Toolkit is the ability to debug without having to re-compile, clear cache, and be stuck on the Java side of the debugger ( if you use JSNI, you can’t really debug it with Eclipse plugin). Also, the browser plugin often gets broken with new versions of Chrome, and Firefox. It is not the most “seemless” experience, so I looked for a better option. Super dev mode works nice in Chrome, which is what I use for GWT development.

GWT has now added support for source maps ( more info on source maps here). In my eyes it is the future of all Languages that compile to Javascript. When supported, it will allow GWT to be debugged in any browser. I believe Firefox and Chrome currently support it. I wouldn’t be surprised if IE adds support becuase of Microsoft’s Typescript.

GWT's Super Dev Mode is only supported in GWT 2.5+. If you have not upgraded, please upgrade before attempting Super Dev Mode

###Prepare to use Source Maps To use Source Maps you have to make a few modifications to your “.gwt.xml” file.

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

After adding the above, it will require that you recompile. If you use Eclipse you can do it from the context menu, or however you previously compiled GWT.

###Starting the Super Dev Mode server To start the super dev mode server you need to execute the gwt-codeserver.jar file. It is available on Maven Central, and inside your GWT SDK.

Starting the server is pretty simple, it is simply a Java command with a few parameters.

java -cp "./gwt/sdk/gwt-codeserver.jar:./gwt/sdk/gwt-user.jar:./gwt/sdk/gwt-dev.jar" com.google.gwt.dev.codeserver.CodeServer -src src com.test.MyFirstModule

The full command line parameters are listed below.

CodeServer [-bindAddress address] [-port port] [-workDir dir] [-src dir] [module]

where
  -bindAddress  The ip address of the code server. Defaults to 127.0.0.1.
  -port         The port where the code server will run.
  -workDir      The root of the directory tree where the code server will write compiler output. If not supplied, a temporary directory will be used.
  -src          A directory containing GWT source to be prepended to the classpath for compiling.
and
  module        The GWT modules that the code server should compile. (Example: com.example.MyApp)

After running the CodeServer application you will get a message with the URL that is serving your source. Simply visit that URL, and you should see 3 pretty simple instructions. Make sure you do 1., 2 is a bit more tricky then they explain.

Modifying and Serving your HTML file

The HTML file that hosts your application, will have to be modified. In Step 2 of the Source Maps server instructions, it tells you to visit a page that uses one of the modules. To me this was a bit misleading, because at this point, nothing is actually serving your HTML file.

First, modify your Host HTML page to redirect the

<script src="module/module.nocache.js"></script>

to your Source Maps server :

<script src="http://localhost:9876/module/module.nocache.js"></script>

.

After you have redirected your page to load the correct “.js” files,</span>

You need to serve the HTML file somehow. The simplest and quickest way I found to serve the HTMl files, was to use python ( I am aware this is probably not the best and most reliable method, but it works ). Navigate to the root directory of your HTMl file, and execute :

python -m SimpleHTTPServer

###Enable Source Maps in Chrome 1. Open chrome dev tools 2. Open Settings (gear in bottom right of dev tools) 3. In “Source” section, enable source maps

If you notice you can navigate and step through both the Java code and jsni methods (something that was never available before). Also, recompiling the module is as easy as clicking “Dev Mode On” again and compiling the new module. Compilations are much quicker than full GWT compiles. The incremental builds save a lot of time.

Even if the Eclipse/IntelliJ plugin paired with chrome’s plugin are good enough for you, source maps still have some advantages. Source maps appear to be a new techonology that will be used more and more, so getting familiar with using it now should benefit you in the future.