Firefox is the default browser for WebDriver and hence, tends to be the browser of choice for most Automation Analysts. Inspecting HTML, CSS Elements, and the DOM Structure in general constitute a quintessential part of the Automation Analysts’ job, and Firefox’s Firebug plug-in is our preferred tool to Inspect Elements in Firefox. Firebug can be used to reference, edit, and monitor a website’s HTML, CSS, DOM, and JavaScript. The plug-in can be downloaded here. Once the plug-in is installed, the user can access this utility by clicking on the Firebug icon in the browser toolbar.
You can access Firebug using this icon after installation
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”.
Alternatively, you can right click and select “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.
Clicking the Inspect button will let you identify any object on the page
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.
Here we are inspecting the Firebug image near the page header
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.
