11. 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




No comments:

Post a Comment