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. ...
Get Vaadin 7 UI Design By Example Beginner's Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
