GWT

This is a beta version. If you find errors, please report them or change them!

Brian Slesinsky, Senior Software Engineer
Updated June 2012

Super Dev Mode is an experimental replacement for GWT's Development Mode. Like its predecessor (which I'll call classic Dev Mode), Super Dev Mode allows GWT developers to quickly recompile their code and see the results in a browser. It also allows developers to use a debugger to inspect a running GWT application. However, it works differently.

How it works

Super Dev Mode runs the GWT compiler in a web server, which is an ordinary Java application that developers can run from the command line. After the server starts up, it prints its URL:

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

This web server provides the user interface for interacting with Super Dev Mode and also serves the GWT compiler's output. When a developer presses the "Compile" button for a GWT module, the code server runs the GWT compiler in draft mode (with most optimizations turned off) and makes the compiler's output available at a URL that looks something like this:

http://localhost:9876/hello/hello.nocache.js

That's nice, but how do we use it on an HTML page? One possibility would be to temporarily edit the <script> tag in an HTML page that runs a GWT application. But this can be inconvenient when the HTML page is on a server that's shared with other users, or when modifying the HTML can only be done via a slow server restart. We could also use a browser plugin like "classic" Dev Mode, but the GWT team has learned that browser plugins are often hard to maintain.

Instead, Super Dev Mode provides another way to change the GWT application's URL, using the "Dev Mode On" bookmarklet. Clicking the bookmarklet shows a dialog that lists the GWT applications on the current page and allows you to compile them:

Pressing the "Compile" button recompiles the GWT App, sets a special value in session storage, and reloads the page.

Here's what the session storage variable looks like:

> window.sessionStorage["__gwtDevModeHook:hello"]
  "http://localhost:9876/hello/hello.nocache.js"

The hello.nocache.js script will look for this special key (with the same module name) in session storage and automatically redirect to the provided URL.

However, since Super Dev Mode is still an experimental feature, the redirect is not enabled by default. To enable Super Dev Mode for a GWT application, you must currently add the following lines to its module.xml file:

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

(Currently, only the xsiframe linker supports Super Dev Mode.)

Debugging

Super Dev Mode compiles entire GWT applications to JavaScript, similar to production mode. This means we can't use a normal Java debugger like in classic Dev Mode. However, there is an emerging web standard called "Source Maps" that will allow developers to see Java (and other languages) in the browser's debugger instead. In Chrome, you must enable Source Maps in the debugger settings:

Once this setting is on, you will be able to browse all the Java source in your GWT app in the "Scripts" panel in Chrome's developer tools.

Here's how it works: when using Super Dev Mode, the browser's debugger will download Java files from the code server. Although this isn't a practical way to browse your source code, you can actually view a source file directly by going to the code server in a browser. Here's an example URL:

http://localhost:9876/sourcemaps/hello/com/google/gwt/core/client/GWT.java

To avoid inadvertently exposing source code to the Internet, the code server runs on localhost by default, so that the code server is only reachable from a browser running on the same machine. You should only change this if you're behind a firewall and you don't mind that other people on the same network might look at the source code.

Differences

Compared to classic Dev Mode, Super Dev Mode's approach has some advantages:

  • No browser plugins required. This will make it much easier to support more browsers, particularly browsers on mobile phones.
  • Performance is much faster for GWT code that calls JavaScript frequently, because it no longer requires a network round trip.
  • Super Dev Mode doesn't automatically recompile after every page reload, making it easier to debug multi-page apps.
  • Super Dev Mode doesn't suffer from bugs in browser extension API's.
  • Developers can debug Java, JavaScript, and possibly other client-side languages in the same debugging session. This is especially useful when calling JavaScript libraries from GWT.
  • Browser debuggers have advanced features (such as DOM breakpoints) that can be useful for debugging GWT code.

However, there are also some disadvantages you should be aware of:

  • Work to secure Super Dev Mode is incomplete. In the meantime, we recommend only running the code server on localhost or behind a firewall. Also, as a safety measure, Super Dev Mode should be disabled in production apps. (That is, set devModeRedirectEnabled to false.)
  • We expect that Super Dev Mode will be able to support any modern browser, but for now, we have only tested it on Chrome and Firefox.
  • Currently, Super Dev Mode doesn't work on some very large GWT apps where classic Dev Mode works.
  • Only one GWT linker supports Super Dev Mode
  • Currently, only the Chrome debugger supports Source Maps. We hope browser support will improve so that you can easily debug problems that only happen in other browsers, but in the meantime, you'll have to resort to other debugging tricks, such as adding logging statements and recompiling.
  • Many features of Java debuggers aren't available when using Super Dev Mode. For example, when inspecting variables in the Chrome debugger, the field names and values are JavaScript, not Java.
  • Currently, Super Dev Mode doesn't support running Java web apps (war files) like classic Dev Mode. The workaround is to run them on a separate server.
  • Since Super Dev Mode doesn't run GWT applications in a JVM, some runtime checks don't happen. For example, there won't be any IndexOutOfBoundsException when an array index is out of range.

For these reasons, Super Dev Mode is still considered experimental. We hope that early adopters will enjoy using it and contribute improvements, so that eventually Super Dev Mode can replace classic Dev Mode.

Starting the code server

If that hasn't scared you off, here are some details you'll need for starting Super Dev Mode:

  • The jar file is gwt-codeserver.jar
  • You will also need gwt-dev.jar in your classpath, along with anything else needed to compile your GWT app (most likely gwt-user.jar).
  • The main method is in com.google.gwt.dev.codeserver.CodeServer

Here are the command line arguments that CodeServer currently supports:

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)

Happy hacking!