ui:debug to inspect JSF component tree and UI state

On several occasions, it would be handy to view the component tree and view state.

The <ui:debug..> makes this possible. Using the plain tag with no attributes specified is the most simplest usage:

---

<ui:debug />

---

To view the The component tree, load the page holding this tag and press Ctrl+shift+d. This should bring up a new window. But Ctrl+shift+d happens to be a browser shortcut for “Organize bookmarks” in Firefox and the “Bookmark Manager” in Google Chrome. So we need to change the default hotkey which is done as follows:

---

<ui:debug rendered="true" hotkey="o"/>

---

Now reload the page and press Ctrl+shift+o. Now a new window opens with the “Component Tree” and “Scoped Variables”.

1.      The component tree gives a inundated lists all UI components starting with UIViewRoot.

2.      The scoped variables lists various beans in various scopes (e.g. Request Parameters, View Attributes, Request Attributes, Session Attributes, Application Attributes)

The rendered attribute can be used to turn off this feature in production.