Time for action – inspecting HTML

Follow these steps to inspect the HTML generated by Vaadin:

1. Run the themes example application.

2. Browse to the application using Firefox or Chrome (make sure you have installed Firebug if using Firefox).

3. Right click on the Dashboard button and select Inspect Element with Firebug if you are in Firefox, or Inspect element if you are in Chrome.

4. Take a look at the actual HTML code Vaadin is generating for the button.

What just happened?

You just learned how to inspect HTML. If you look carefully, you can see several class values:

<div tabindex="0" role="button" class="v-button v-widget v-has-width"
    style="width: 100%;">

  <span class="v-button-wrap">
    <span class="v-button-caption">Dashboard</span>
  </span>

</div>

For example, the outer div element is using three CSS classes: v-button, v-widget, and v-has-width.

Note

If you don't use Firebug or Chrome DevTools, you can display the HTML of the current page of the browser by...