Google+

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 www.google.com


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.



8 comments:

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 ?

http://www.blogbooker.com/

SHOBHS said...

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