1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
---
title: Debug Mode and Window
order: 3
layout: page
---
[[advanced.debug]]
= Debug Mode and Window
Vaadin applications can be run in two modes: __debug mode__ and __production
mode__. The debug mode, which is on by default, enables a number of built-in
debug features for Vaadin developers:
* Debug Window
* Display debug information in the Debug Window and server console
* On-the-fly compilation of Sass themes
* Timings of server calls for Vaadin TestBench
It is recommended to always deploy production applications in production mode
for security reasons.
[[advanced.debug.mode]]
== Enabling the Debug Mode
The debug mode is enabled and production mode disabled by default in the UI
templates created with the Eclipse plugin or the Maven archetypes. Some
archetypes have a separate module and profile for producing a production mode
application. The debug mode can be enabled by giving a
[parameter]#productionMode=false# parameter to the Vaadin servlet
configuration:
[subs="normal"]
----
@VaadinServletConfiguration(
productionMode = **false**,
ui = **MyprojectUI.class**)
----
Or with a context parameter in the [filename]#web.xml# deployment descriptor:
[subs="normal"]
----
<context-param>
<description>Vaadin production mode</description>
<param-name>productionMode</param-name>
<param-value>**false**</param-value>
</context-param>
----
Enabling the production mode disables the debug features, thereby preventing
users from easily inspecting the inner workings of the application from the
browser.
[[advanced.debug.open]]
== Opening the Debug Window
Running an application in the debug mode enables the client-side Debug Window in
the browser. You can open the Debug Window by adding " ?debug" parameter to the
URL of the UI, for example, http://localhost:8080/myapp/?debug. The Debug Window
has buttons for controlling the debugging features and a scrollable log of debug
messages.
[[]]
.Debug Window
image::img/debug-window-annotated-hi.png[]
The functionalities are described in detail in the subsequent sections. You can
move the window by dragging it from the title bar and resize it from the
corners. The [guibutton]#Minimize# button minimizes the debug window in the
corner of the browser window, and the [guibutton]#Close# button closes it.
If you use the Firebug plugin for Firefox or the Developer Tools console in
Chrome, the log messages will also be printed to the Firebug console. In such a
case, you may want to enable client-side debugging without showing the Debug
Window with " ?debug=quiet" in the URL. In the quiet debug mode, log messages
will only be printed to the console of the browser debugger.
[[advanced.debug.log]]
== Debug Message Log
The debug message log displays client-side debug messages, with time counter in
milliseconds. The control buttons allow you to clear the log, reset the timer,
and lock scrolling.
[[]]
.Debug Message Log
image::img/debug-log-hi.png[]
[[advanced.debug.log.custom]]
=== Logging to Debug Window
You can take advantage of the debug mode when developing client-side components,
by using the standard Java [classname]#Logger# to write messages to the log. The
messages will be written to the debug window and Firebug console. No messages
are written if the debug window is not open or if the application is running in
production mode.
[[advanced.debug.info]]
== General Information
The [guilabel]#General information about the application(s)# tab displays
various information about the UI, such as version numbers of the client and
servlet engine, and the theme. If they do not match, you may need to compile the
widget set or theme.
[[]]
.General Information
image::img/debug-info.png[]
[[advanced.debug.hierarchy]]
== Inspecting Component Hierarchy
The [guilabel]#Component Hierarchy# tab has several sub-modes that allow
debugging the component tree in various ways.
[[advanced.debug.hierarchy.tree]]
=== Connector Hierarchy Tree
The [guibutton]#Show the connector hierarchy tree# button displays the
client-side connector hierarchy. As explained in
<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
with the Server-Side">>, client-side widgets are managed by connectors that
handle communication with the server-side component counterparts. The connector
hierarchy therefore corresponds with the server-side component tree, but the
client-side widget tree and HTML DOM tree have more complexity.
[[]]
.Connector Hierarchy Tree
image::img/debug-hierarchy-tree.png[]
Clicking on a connector highlights the widget in the UI.
[[advanced.debug.hierarchy.inspect]]
=== Inspecting a Component
The [guibutton]#Select a component in the page to inspect it# button lets you
select a component in the UI by clicking it and display its client-side
properties.
To view the HTML structure and CSS styles in more detail, you can use Firebug in
Firefox, or the Developer Tools in Chrome, as described in
<<dummy/../../../framework/installing/installing-other#installing.other.firefox,"Firefox and Firebug">>. Firefox also has a built-in feature for inspecting HTML and CSS.
[[advanced.debug.hierarchy.analyze]]
=== Analyzing Layout Problems
The [guilabel]#Check layouts for potential problems# button analyzes the
currently visible UI and makes a report of possible layout related problems. All
detected layout problems are displayed in the log and also printed to the
console.
[[figure.advanced.debug.hierarchy.analyze]]
.Debug window showing the result of layout analysis.
image::img/debug-window-analyze-layouts.png[]
Clicking on a reported problem highlights the component with the problem in the
UI.
The most common layout problem is caused by placing a component that has a
relative size inside a container (layout) that has undefined size in the
particular direction (height or width). For example, adding a
[classname]#Button# with 100% width inside a [classname]#VerticalLayout# with
undefined width. In such a case, the error would look as shown in
<<figure.advanced.debug.hierarchy.analyze>>.
[classname]#CustomLayout# components can not be analyzed in the same way as
other layouts. For custom layouts, the button analyzes all contained
relative-sized components and checks if any relative dimension is calculated to
zero so that the component will be invisible. The error log will display a
warning for each of these invisible components. It would not be meaningful to
emphasize the component itself as it is not visible, so when you select such an
error, the parent layout of the component is emphasized if possible.
[[advanced.debug.hierarchy.used]]
=== Displaying Used Connectors
The last button, [guibutton]#Show used connectors and how to optimize widget
set#, displays a list of all currently visible connectors. It also generates a
connector bundle loader factory, which you can use to optimize the widget set so
that it only contains the widgets actually used in the UI. Note, however, that
it only lists the connectors visible in the current UI state, and you usually
have more connectors than that.
[[advanced.debug.communication]]
== Communication Log
The [guilabel]#Communication# tab displays all server requests. You can unfold
the requests to view details, such as the connectors involved. Clicking on a
connector highlights the corresponding element in the UI.
You can use Firebug or Developer Tools in Firefox or Chrome, respectively, to
get more detailed information about the requests and responses.
[[advanced.debug.devmodes]]
== Debug Modes
The [guilabel]#Menu# tab in the window opens a sub-menu to select various
settings. Here you can also launch the GWT SuperDevMode, as described in
<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging
Client-Side Code">>.
|
