Docs

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →

Docs

Debugging Client-Side Code

Vaadin currently includes SuperDevMode for debugging client-side code right in the browser.

The predecessor of SuperDevMode, the GWT Development Mode, no longer works in recent versions of Firefox and Chrome, because of certain API changes in the browsers. There exists workarounds on some platforms, but for the sake of simplicity, we recommend using the SuperDevMode.

Launching Development Mode

The Development Mode launches the application in the browser, compiles the client-side module (or widget set) when the page is loaded, and allows debugging the client-side code in Eclipse. You can launch the Development Mode by running the com.google.gwt.dev.DevMode class. It requires some parameters, as described later.

The Vaadin Plugin for Eclipse can create a launch configuration for the Development Mode. In the Vaadin section of project properties, click the Create development mode launch button. This creates a new launch configuration in the project. You can edit the launch configuration in Run › Run Configurations.

-noserver -war WebContent/VAADIN/widgetsets com.example.myproject.widgetset.MyWidgetSet -startupUrl http://localhost:8080/myproject -bindAddress 127.0.0.1

The parameters are as follows:

-noserver

Normally, the Development Mode launches its own Jetty server for hosting the content. If you are developing the application under an IDE that deploys it to a server, such as Eclipse, you can disable the Development Mode server with this option.

-war

Specifies path to the location where the JavaScript is to be compiled. When developing a pure client-side module, this could be the WebContent (in Eclipse) or some other folder under it. When compiling widget sets, it must be WebContent/VAADIN/widgetsets.

-startupUrl

Specifies the address of the loader page for the application. For server-side Vaadin applications, this should be the path to the Vaadin application servlet, as defined in the deployment. For pure client-side widgets, it should be the page where the application is included.

-bindAddress

This is the IP address of the host in which the Development Mode runs. For debugging on the development workstation, it can be just 127.0.0.1. Setting it as the proper IP address of the host enables remote debugging.

Launching SuperDevMode

The SuperDevMode is much like the old Development Mode, except that it does not require a browser plugin. Compilation from Java to JavaScript is done incrementally, reducing the compilation time significantly. It also allows debugging JavaScript and even Java right in the browser (currently only supported in Chrome).

You can enable SuperDevMode as follows:

  1. You need to set a redirect property in the .gwt.xml module descriptor as follows:

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

    In addition, you need the xsiframe linker. It is included in the com.vaadin.DefaultWidgetSet as well as in the com.vaadin.Vaadin module. Otherwise, you need to include it with:

    <add-linker name="xsiframe" />

  2. Compile the module (that is, the widget set), for example by clicking the button in Eclipse.

  3. If you are using Eclipse, create a launch configuration for the SuperDevMode by clicking the Create SuperDevMode launch in the Vaadin section of the project properties.

    1. The main class to execute should be com.google.gwt.dev.codeserver.CodeServer.

    2. The application takes the fully-qualified class name of the module (or widget set) as parameter, for example, com.example.myproject.widgetset.MyprojectWidgetset.

    3. Add project sources to the class path of the launch if they are not in the project class path.

The above configuration only needs to be done once to enable the SuperDevMode. After that, you can launch the mode as follows:

  1. Run the SuperDevMode Code Server with the launch configuration that you created above. This perfoms the initial compilation of your module or widget set.

  2. Launch the servlet container for your application, for example, Tomcat.

  3. Open your browser with the application URL and add ?superdevmode parameter to the URL (see the notice below if you are not extending DefaultWidgetSet). This recompiles the code, after which the page is reloaded with the SuperDevMode. You can also use the ?debug parameter and then click the SDev button in the debug console.

If you make changes to the client-side code and refresh the page in the browser, the client-side is recompiled and you see the results immediately.

The Step 3 above assumes that you extend DefaultWidgetSet in your module. If that is not the case, you need to add the following at the start of the onModuleLoad() method of the module:

if (SuperDevMode.enableBasedOnParameter()) { return; }

Alternatively, you can use the bookmarklets provided by the code server. Go to http://localhost:9876/ and drag the bookmarklets " Dev Mode On" and " Dev Mode Off" to the bookmarks bar

Debugging Java Code in Chrome

Chrome supports source maps, which allow debugging Java source code from which the JavaScript was compiled.

Open the Chrome Inspector by right-clicking and selecting Inspect Element. Click the settings icon in the upper right corner of the window and check the Scripts › Enable source maps option. Refresh the page with the Inspector open, and you will see Java code instead of JavaScript in the scripts tab.