Running GWT superdev mode - Boost up GWT Debugging

Introducing GWT Super Dev Mode

                       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.

                        This document talks about how to configure super dev mode. For introduction and background refer GWT official doc https://developers.google.com/web-toolkit/articles/superdevmode

SuperDevMode Setup

---

The below instructions are gives the formal introduction to setup the superdevmode for any GWT application. To run the superdevmode, we need code server and our application server. The below steps are summarizing these steps.

Code Server Setup

---

1. In eclipse, Create new GWT webapplication if you don't have one
2. Add the below lines in the application's .gwt.xml moduel to enable superdev mode
   

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

   
   

   <set-property name="compiler.useSourceMaps" value="true">
   </set-property>

   
   The below mentioned property is needed if you have script tags in any of your ".gwt.xml" files.
   

   <set-configuration-property name='xsiframe.failIfScriptTag' value='FALSE'/>

3. Right click on your GWT project and go to Run As-> Run Configuration
4. Select Java application -> right click -> Create new configuration like below
   
   
5. Enter 'com.google.gwt.dev.codeserver.CodeServer' as our main class
6. In the arguments tab, enter the program arguments with format '-src sourcefolder moduleName'. Below screenshot gives the example
   
7. In the classpath tab, select user entries -> Add External Jars -> Select 'gwt-codeserver.jar' from the eclipse gwt sdk installation directory (It would be like 'eclipse-jee-juno-SR1-win32-x86_64\eclipse\plugins\com.google.gwt.eclipse.sdkbundle_2.5.0.v201211121240-rel-r42\gwt-2.5.0'). Refer the below screenshot for example
   
   
8. Now, click Apply and run the application
9. Once codeserver started, it will show the information like below in the console
   
10. Open the url http://localhost:9876/ in the browser and will show the information like below
    
11. Drag and Drop 'Dev Mode On' and 'Drag Mode Off' buttons to the bookmark bar
12. Now, Right click on your project and Run As -> Web application
13. Once application started, open the application in the browser without gwt.codeserver plugin parameter like 'http://127.0.0.1:8888/TestProject.html' 
14. It might show the below alert information, ignore that and click 'Ok'
    
    
15. Once application's html page loaded, click 'Dev Mode on' from the bookmark bar. It will popup the modules to recompile as shown below
    
    
16. Compile the required modules and once its done reload the page
17. Now, we can able to see the GWT application in the browser

Application Debugging with SourceMap

---

The advantage of superDevMode is javascript debugging. Right now, only chrome browser supports one of HTML5 functionality 'source map'.  To enable this functionality follow the below steps

1. From the chrome browser-> go to developer tools (shortcut key F12)
2. In the developer tools panel, select settings
3. In the settings panel, enable the 'source map' check box as shown below
   
   
4. After enabling source map, reload the page. In the developer tool, select 'source'tab
5. Now, we can see the client java classes in the left navigation tree. From that, select required classes and place breakpoints, watch etc., and enjoy. The sample screen shown below
   
   

Trouble Shoot

---

Source map is not working in chrome? 

In chrome 24+, source map will not work with current version (related to gwt 2.5) of code server. To fix this, we can downgrade chrome for 22 or build the gwt code server from the trunk. Already fix is available for code server in trunk to support chrome 24+ versions.

How to run code server in Eclipse classroom project?

1. Right click on the application project and select Run As–> Run configurations... --> Java applications and create new configuration for coder server.
2. In the new configuration, select Class path and in the user entries section 
   1. Add codeserver Jar
   2. Add GWT dev jars 
   3. Add all project dependencies as mentioned in the below screen
      
      

      

      Make sure right version of jars are there

     3. Click Run and that's All!