You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

advanced-debug.asciidoc 7.5KB

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