Super Dev mode in GWT

Question

I'm new to gwt. I don't know how to start up Super Dev mode. I need the detailed explanation step by step.

I have tried editing gwt.xml file by adding

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

but i cant get the idea about this.

Answer 1

UPDATE: starting with GWT 2.7, DevMode will actually use Super Dev Mode automatically by default, so you just have to launch DevMode like you did previously, and the app will be (re)compiled automatically on page (re)load.
One difference is that a special .nocache.js is generated so you must ensure this specific file is loaded by the browser; to debug a remote server (like you could do previously with DevMode running with -noserver), you'll have to use the bookmarklets as described below though.

To run in Super Dev Mode, you must go through 2 preparatory steps:

1. Super Dev Mode only works with the xsiframe linker, so make sure you have the following line in your .gwt.xml too:

   <add-linker name="xsiframe" />
   

   That linker is safe for production use (Google uses it everywhere, slightly customized), so feel free to turn it on for all your projects (it combines the best of the std linker –the default one– and the xs linker, without their downsides).

   Note: that linker will be the default in 2.7

   If you use a version of GWT before 2.6.0, you'll also have to enable Super Dev Mode in your .gwt.xml:

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

   Otherwise, if you intend to use Super Dev Mode from a URL different from 127.0.0.1 or localhost, then you'll have to whitelist the host. This is done using a regexp, e.g.:

   <set-configuration-property name="devModeUrlWhitelistRegexp" value="http://(mymachinename|192\.168\.5\.151)(:\d+)?/.*" />
   

   See https://stackoverflow.com/a/21938574/116472

2. compile and deploy your app to a web server near you (if you used a .gwt.xml file specific to Super Dev Mode, make sure you compile that one module: the xsiframe linker and devModeRedirectEnabled property are necessary for that compilation step!)

   If you use GWT-RPC, set the system property gwt.codeserver.port to the port you'll run Super Dev Mode on (defaults to 9876) so your server can download RPC serialization policies right from the Super Dev Mode.
   If you run them on different machines, you'll have to override getCodeServerPolicyUrl in all of your RemoteServiceServlets. Consider the security implications though, as noted in the javadoc

Once that's done you can start a Super Dev Mode session:

1. Launch com.google.gwt.dev.codeserver.CodeServer with the same classpath that you'd launch DevMode with (i.e. gwt-user.jar, gwt-dev.jar and all your client-side dependencies: e.g. GXT, GIN+Guice, GWTEventBinder, etc.) but adding gwt-codeserver.jar; and passing the name of your module as argument.

   It'll start by compiling your module to check that it can actually be compiled; you can skip this step by passing -noprecompile as argument.

   If you never ran Super Dev Mode, go to http://localhost:9876 and add the Dev Mode On and Dev Mode Off links to your bookmarks (drag/drop them to your bookmarks bar).

   Note: if you use Maven, you should be able to use mvn gwt:run-codeserver (note: there's a bug in the releases of the plugin up to 2.6.0 where you actually have to run mvn process-classes gwt:run-codeserver; this is fixed in 2.6.1).

2. Open your app in your browser, then hit the Dev Mode On bookmarklet. Click the Compile button in the popup that opens. It should refresh the page and load the JS from the CodeServer rather than from your server. Your browser's development tools should also load the SourceMaps so you can see and debug (step by step) your Java code.

3. When you want to test changes you made to your code, hit the Dev Mode On bookmarklet again. Contrary to DevMode, refreshing the page won't make it run the new code; the code has to be recompiled first, and this is done when clicking the Compile button after the Dev Mode On bookmarklet (note: you can also directly bookmark the Compile button to save a click, but note that it's bound to your module, so you'd need multiple bookmarks if you work on several modules).

4. When you're done, hit Dev Mode Off to make sure you switch back to production mode, then shutdown the CodeServer process (CtrlC in the console should work).

Official documentation at http://www.gwtproject.org/articles/superdevmode.html
See also http://blog.ltgt.net/how-does-gwts-super-dev-mode-work/ for more information about how Super Dev Mode actually works.