Inspecting elements
This recipe will introduce the HTML panel of Firebug and how it can be used to inspect the document structure, select an HTML element, and watch its CSS style.
How to do it...
Open an HTML page, for example, http://www.google.com in your browser.
Now click on the arrow icon from the Firebug bar and move your mouse pointer over any element on the page. The element will be highlighted and in the Firebug panel you will see details of that HTML element, as seen in the following screenshot:
Another method, which is faster and more accurate, is to right-click on an element and click on Inspect Element on the context menu. Firebug will set the focus on the selected element.
How it works...
The HTML panel of Firebug is divided into two parts. The left panel shows the HTML whereas the right part shows the CSS styles. Clicking on the Inspect button allows us to inspect any element on the page. Moving the mouse pointer over any element will then display the element details in the HTML panel of Firebug. This panel displays the complete HTML of the document. This way we can see the complete structure of a page. There is one more advantage of inspecting elements in the HTML panel. It also shows the elements created after page load, that is, if you created any elements with jQuery or JavaScript, it will also show them in the HTML panel.
Once an element is selected, the right-hand side of Firebug shows its CSS styles whether defined in a stylesheet or created by a script.
There's more...
Plugins for firebug
Yes, you read that right. Firebug itself is a plugin, however, there are some other plugins that are very useful in rapid web development and are recommended to use with Firebug. Both of the tools listed next are useful in determining network activity, page performance, download time, and so on. Both of these provide a score of page performance against a set of rules and listed recommendations that can make page performance faster:
Google Page Speed: It is a plugin from Google. The following is its description from the Google site:
Page Speed is an open-source Add-on for Firebug. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
You can download Page Speed from the following URL: http://code.google.com/speed/page-speed/download.html.
Yahoo! YSlow: It is a plugin from Yahoo!, and can be downloaded from https://developer.yahoo.com/yslow/.
See also
The next recipe Editing HTML and CSS
