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

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.

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.