Installing Other Tools

We recommend using a browser with either integrated or external development tools.

At least Mozilla Firefox and Google Chrome have an integrated web inspector, which supports inspecting the DOM structure of a web page, as well as CSS styles and debug JavaScript execution.

Firefox and Firebug

While Firefox has an integrated web inspector, the Firebug inspector has some additional features.

Using Firebug with Vaadin

After installing Firefox, use it to open http://www.getfirebug.com/. Follow the instructions on the site to install the latest stable version of Firebug available for the browser. You may need to allow Firefox to install the plugin by clicking the yellow warning bar at the top of the browser window.

After Firebug is installed, it can be enabled at any time from the Firefox toolbar. Firebug Debugger for Firefox shows Firebug in action.

Firebug Debugger for Firefox

The most important feature in Firebug is inspecting HTML elements. Right-click on an element and select Inspect Element with Firebug to inspect it. In addition to HTML tree, it also shows the CSS rules matching the element, which you can use for building themes. You can even edit the CSS styles live, to experiment with styling.