4. How to use FireBug?

Pre-requisite - Install FireBug Firefox Add-on as explained in the previous post.

1. Launch Firefox Browser and browse any site say

2. Press F12 key or click on the 'FireBug' icon on the Firefox Browser

3. Ensure that the FireBug options gets displayed as shown below

4. Click on the 'Inspect Element' option of the FireBug as shown below, select any UI element on the page say 'Google Logo' and ensure that the source code of the selected UI element (i.e. Google Logo in this example) is highlighted as shown below

5. Observe that the above highlighted source code is in html format. We may need this source code to identify the properties of the selected UI element (i.e. Google Logo in this example)

6. For example if we want to know the id property details of the selected UI element Google Logo. First we need to inspect the Google Logo by following the above 4 steps and copy the 'id' details from the highlighted source code as shown below

How to use the copied 'id' property value will be explained later.

Please comment below to feedback or ask questions.

How to install Firepath Add-on for Firefox  will be in the next post.


Anonymous said...

Good one

Arun Motoori said...

Thank You

BRU said...

Nicely explained..Good One Arun...

Arun Motoori said...

@BRU - Thank You

Harithoshima Puppala said...

Thnq Arun,nice blog

Arun Motoori said...

@Harithoshima - Thank You

Sou_Nav said...

Arun.. Is it possible for you to convert your entire blog to pdf ?

SHOBHS said...

Nice Arun....Very helpful for beginners like me....till now everything going smooth....cheers

Smrutiranjan Dash said...

I have latest version of mozila Firefox for which no firebug available showing. So please help me how to set firepath

Arun Motoori said...

@Smrutiranjan - Downgrade to older version of Firefox say 47.0.1.

Before downgrading stop the auto downgrades from Tools > Options of firefox. And setting this option, install the older version of Firefox i.e. 47.0.1 from

Reason: FireBug, Firepath and Selenium IDE add-ons wont work from 55 version of Firefox. Hence install older version of Firefox when you need these add-ons.

Ritanjali Sahoo said...

Hey Arun,

I tried to download firebug and firepath in my new laptop recently but i'm not getting any links for it while i search as firbug addon. Since the support of both is not available now from Mozilla the links are also not available. Can u pls let me know if there is any other option to get these 2 addons.

Thanks in Advance.

Arun Motoori said...

Hi Ritanjali,

Yes Firebug and Firepath are now removed from web by their creators.

You can use an alternative addon known as ChroPath.

You can install this addon on either Firefox or Chrome Browser.

You can call me/whatsapp me on +91 - 9908895533 for more details.