The user can also access the Firebug utility by clicking F12 (PC option only) or by right clicking in the browser window and selecting “Inspect Element with Firebug”.
Note that Firefox has another development tool listed right above Firebug called Inspect Element. These two tools offer mildly different functions while being essentially the same tool, for example Firebug has a useful feature where it uses suggestions when editing the CSS window while Inspect Elements in Firefox doesn’t. There are advantages to both tools but in this article will focus on our use of Firebug.
Once Firebug is launched, the user can now identify any object that is on the page by clicking the Inspect button.
By moving the mouse over the browser window a box will highlight elements that the tool is able to reference. Below is a screenshot of sample output from the Firefox’s Firebug image located on the site’s main landing page, where the “Firebug” is highlighted.
We use Firebug as described above to inspect elements in Firefox but Firebug has a lot of other bells and whistles that make it extremely valuable to Front End & Back End developers alike. You can also take a look at the alternatives to Firebug for the other major browsers (IE, Chrome, Firefox) here.