Using GWT Super Dev Mode / Source Maps
August 24, 2013
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.
###Prepare to use Source Maps To use Source Maps you have to make a few modifications to your “.gwt.xml” file.
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 server is pretty simple, it is simply a Java command with a few parameters.
The full command line parameters are listed below.
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
to your Source Maps server :
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 :
###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.