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.

Solution 1

Follow these steps, you 'll definitely find the solution.

1. Download the GWT 2.5 RC2, and put it somewhere...I put it in my eclipse/plugins directory. link

2. In Eclipse, add GWT 2.5 to the Project -> Properties -> Google -> Web Toolkit -> Configure SDKs screen, and select the 2.5 version that you have added to the directory in the step above.

3. Right click on the project in Eclipse, go to its Run Configurations window, and create a new "Java Application", name it something like "GWT Super Dev Mode".

4. While in the Run Configurations window, do the following:

   1. Set the project based on your project name, and type in the main class as com.google.gwt.dev.codeserver.CodeServer

   2. On the Classpath tab, click user Entries, then click Add External JARs, navigate to the GWT 2.5 directory, and find the gwt-codeserver.jar, and click "Open" (and other external libraries).

   3. In the Arguments tab, add -src src/ *SOURCE PATH OF YOUR PROJECT* to Program arguments, and add optional -Xmx1024m to VM arguments.

   4. Click Apply, then go ahead and Run the project.

5. After this you will get a URL like, localhost:9876/

6. Goto that URL, and bookmark, Dev Mode ON and Dev MOde Off then run your code, remove the suffix gwt.codesvr=127.00.1:9997 in the URL. Now click Dev Mode ON...

Hope you get the solution...

Solution 2

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.

Solution 3

I wrote a simple step by step guideline for hello world project debugging with super-dev-mode Here.

After reading through the step by step guideline with screenshots you cannot miss it.

Also, you can read up on the technology -

GWT SuperDevMode - Ray Cromwell Post and GWT Dev Guide

SourceMaps - GWT and Sourcemaps and HTML5 Sourcemaps

Solution 4

Have a look to this video, could help

http://jeff-davis.blogspot.fr/2012/07/setting-up-gwt-25s-superdevmode.html

View more solutions

Comments

[Christian Kuetbach]

Will there be a debugging-support in eclipse or IntelliJ? (I know it might be like asking an oracle)

[Thad]

Re the warning in Step #1, how might I keep two *.gwt.xml files and switch them for Super Dev Mode vs production using Maven?

[Thomas Broyer]

@Thad: it's not “The Maven Way™” but you can use profiles; see github.com/tbroyer/gwt-maven-archetypes/blob/… for an example. Or you can simply use a property and override its value from the command line.

[Thomas Broyer]

@Thad the warning is moot. It's safe to use in prod and is now enabled by default in GWT 2.6.0-rc4 onwards.

[Adnane.T]

@ThomasBroyer what about if I followed all these steps, but I get a browser fetching error, it can't find the *.nocache.js (I didn't changed anything it works perfectly on hosted mode)

[EMM]

Why am I getting "working directory does not exist"?

[Ted Gulesserian]

I get Usage: at least one module must be supplied

[Ted Gulesserian]

I resolved the following error: "Usage: at least one module must be supplied" By supplying an argument to the CodeServer that had the fully qualified package it was under. e.g. com.somepackage.testgwt.TestGWT where TestGWT is a reference to my TestGWT.gwt.xml file.

[kirilv]

When the code stops on a breakpoint, I can only watch javascript. Is it possible to debug the java code (add a watch for a java variable before it gets translated into javascript)?