Flos Blog

GWT and Vaadin come with a great feature to debug the client-side widget code in the Chrome browser. Using GWT’s code server, the Java code will be displayed in the Chrome browser, and you can set your breakpoints and do debugging stuff directly in Chrome.

To run the superDevMode some preparations are required:

1. Enable SuperDevMode in widgetset
2. Compile your widgetset by a Maven build
3. Download all dependencies required to run the codeserver (another Maven build)
4. Create a launch config to run the code server
5. Enhance the classpath of the code server launch config
   1. Add all downloaded dependencies to the classpath of the code server launch config
   2. Add local client-side code bundles and their source folders to the classpath
   3. Add the widgetset bundle to the classpath
   4. Ensure that 5.2 and 5.3 are at the beginning of the classpath
6. Start the code server
7. Start your OSGi Vaadin Application
8. Open http://localhost:9876/
   1. Bookmark “Dev Mode on” and “Dev Mode off” in the browser
9. Open your application in Chrome {URL}/?superdevmode
10. To reload widgetset in 8) click the “Dev Mode on” bookmark
11. Ensure that Chrome -> Developer tools -> Properties -> Sources -> xyz Sourcemaps are checked
12. Open the source tab in Chrome and find your java sources there

1 Enable SuperDevMode

To enable the super dev mode, add the following lines to your widgetset.gwt.xml

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

<add-linker name="xsiframe" />

2 Compile widgetset

To compile the widgetset properly, we are using a Maven build.

Create a file called pom-compileWidgetset.xml in your widgetset bundle and configure the pom. Therefore just follow Vaaclipse widgetset as a sample.

Following entries in the pom are mandatory:

1. Add all your maven dependencies required to compile the widgetset
2. Configure the vaadin-maven-plugin to compile the widgetset. The compiled widgetset will be copied to ${basedir}/resources.

Run the build with “mvn clean verify -f pom-compileWidgetset.xml”

3 Download all dependencies for the CodeServer

To run the code server properly, a lot of jar files are required. The simplest method to collect all dependencies and their transitive dependencies is to use another Maven build.

Create a file called pom-superdev.xml in your widgetset bundle and configure the pom. For this pom, just follow Vaaclipse widgetset as a sample.

The pom contains all required dependencies and a configuration for the maven-dependency-plugin which copies all jar files to a folder under “${project.build.directory}/superDev-lib”. Attention: The superDev-lib folder will be removed, if you call “mvn clean …” on the widgetset bundle. So it might be a good idea to create a folder called superDev-lib directly in the widgetset bundles root and copy the jars from“${project.build.directory}/superDev-lib” to this folder manually.

Run the build with “mvn clean verify -f pom-superdev.xml”

4 Create a superDev launch config

The superDev launch config is a simple java launch config.

Settings:

• Main class: com.google.gwt.dev.codeserver.CodeServer
• Program arguments: “-logLevel DEBUG org.semanticsoft.vaaclipse.widgetset.DefaultWidgetset”
• VM arguments: “-Xss8M -Xmx512M -XX:MaxPermSize=512M”

5 Enhance the classpath of the superDev launch config

The jar files downloaded under 3) need to be added to the classpath of the launchconfig.

• Open the launch config, switch to tab “Classpath”
• Press “Add JARs”
• Then add all jar files located in /superDev-lib to the classpath.
• Then add any “local client-side bundles” contained in the workspace
• Add the source folder of the “local client-side bundles” too
• Add the “widgetset bundle”
• Add the source folder of the “widgetset bundle”
• Ensure that the “local client-side bundles”, the “widgetset bundle” and their source folders are at the beginning of the classpath.

Follow the launch configs contained in Vaaclipse widgetset as a sample.

6 Run the superDev launch config

Running the superDev launch config means that the widgetset is compiled.

If the code server could start properly, you will find following lines in the console:

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

7 Start the application launch config

Now you need to start you application using a launch config. No special configs are required there.

8 Open http://localhost:9876/

Just follow the instructions on the website and bookmark the two links.

9 Open application in superDevMode

To do this, open {URL}/?superdevmode in your Chrome browser.

The browser will tell you that the widgetset is being recompiled. Afterwards, the application opens.

10 and 11

No steps to describe here …

12 Open source code in Chrome browser

Open the developer tools in Chrome. Under the source tab you should find all your client-side Java code.

You may set breakpoints to the code and do all the debugging stuff — right in your browser!