123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- ---
- title: Debugging Client-Side Code
- order: 6
- layout: page
- ---
-
- [[clientside.debugging]]
- = 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.
-
- ifdef::web[]
- [[clientside.debugging.devmode]]
- == 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 [classname]#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
- [guibutton]#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:
-
- [parameter]#-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.
- [parameter]#-war#:: Specifies path to the location where the JavaScript is to be compiled. When developing a pure client-side module, this could be the [filename]#WebContent# (in Eclipse) or some other folder under it. When compiling widget sets, it must be [filename]#WebContent/VAADIN/widgetsets#.
- [parameter]#-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.
- [parameter]#-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 [literal]#++127.0.0.1++#. Setting it as the proper IP address of the host enables remote debugging.
-
-
- endif::web[]
-
- [[clientside.debugging.superdevmode]]
- == 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:
-
- . You need to set a redirect property in the [filename]#.gwt.xml# module
- descriptor as follows:
-
-
- +
- ----
- <set-configuration-property name="devModeRedirectEnabled" value="true" />
- ----
- +
- In addition, you need the [literal]#++xsiframe++# linker. It is included in the
- [classname]#com.vaadin.DefaultWidgetSet# as well as in the
- [classname]#com.vaadin.Vaadin# module. Otherwise, you need to include it with:
-
-
- +
- ----
- <add-linker name="xsiframe" />
- ----
- . Compile the module (that is, the widget set), for example by clicking the button in Eclipse.
- . If you are using Eclipse, create a launch configuration for the SuperDevMode by
- clicking the [guibutton]#Create SuperDevMode launch# in the [guilabel]#Vaadin#
- section of the project properties.
-
- .. The main class to execute should be [classname]#com.google.gwt.dev.codeserver.CodeServer#.
- .. The application takes the fully-qualified class name of the module (or widget set) as parameter, for example, [classname]#com.example.myproject.widgetset.MyprojectWidgetset#.
- .. 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:
-
- . Run the SuperDevMode Code Server with the launch configuration that you created above. This perfoms the initial compilation of your module or widget set.
- . Launch the servlet container for your application, for example, Tomcat.
- . Open your browser with the application URL and add [literal]#++?superdevmode++# parameter to the URL (see the notice below if you are not extending [classname]#DefaultWidgetSet#). This recompiles the code, after which the page is reloaded with the SuperDevMode. You can also use the [literal]#++?debug++# parameter and then click the [guibutton]#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 [classname]#DefaultWidgetSet# in your
- module. If that is not the case, you need to add the following at the start of
- the [methodname]#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 " [guilabel]#Dev Mode On#" and
- " [guilabel]#Dev Mode Off#" to the bookmarks bar
-
-
- [[clientside.debugging.chrome]]
- == 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 [guilabel]#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.
-
-
-
|