O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required