How to use Firebug?

PREREQUISITE:

Considering you have already installed Firebug on your firefox, if not first go through this post: What is Firebug and How to Install Firebug on Firefox

 

Steps to follow:

1. Launch Firefox.

2. There are couple of ways to bring the firebug frame or view in the firefox browser:

a. Go to ‘Tools’ in the menu bar and choose Web Developer > Firebug > Open Firebug

b. Press F12 key.

c. Click the firebug icon as shown below:

 

firebug1

 

3. By performing any of the operation at step 2, firebug frame would come up as shown below:

 

firebug2

4. Now, open any website as an example say ‘yahoo.com’ and try to inspect the properties of its logo using firebug as explained in next step.

5. Click on ‘Inspect Arrow’ icon and bring the cursor of your mouse over ‘yahoo’ logo at the top and click it, you will see the html code highlight in the firebug frame with blue background, this code corresponds to ‘yahoo’ logo and it shows the properties, attributes information there. please see below screenshot:

 

firebug3

 

6. Now, while working on selenium, you need to look such properties to handle the web element, for example, in the screen above, html code contains the <a> tag with id, class etc. So, you can use them to inspect web elements like in this case ‘yahoo’ logo.

 

NOTE:

How to automate actual selenium test case using firebug help would be explained in upcoming posts.