Introducing Firebug and Chrome inspector

At this point, you understand that your Vaadin UI components are rendered as HTML elements. Each element has a class attribute. If you know the value for this property, you can add Sass rules to it. Nice. However, how to know the value of this property? Most web browsers include developer tools to inspect the HTML being rendered. We are going to take a fast look at how to inspect HTML in Firefox and Chrome.

Firebug is a Firefox extension that allows you to edit, debug, and watch HTML, CSS, and JavaScript in any web page. You can install Firebug from http://getfirebug.com.

Chrome DevTools is the Chrome counterpart of Firebug. Chrome DevTools is bundled in Chrome.

Note

Internet Explorer ships with Developer Tools. However, we are not covering Developer Tools here. You can activate Developer Tools by pressing F12.