How to Install Firebug?
Launch your Firefox browser and navigate to “Add-ons” menu. Alternatively, you can directly open the command URL “about:addons”.
Search for “Firebug” add-on and click the install button to add it to your Firefox browser.
Once added the Firebug icon can be seen along with other tool icons as shown below:
Viewing Webpage Source HTML and CSS Using Firebug
Open any of the webpages you want to analyze and click on the Firebug icon to enable the Firebug developer console panel.
- Click on the “arrow” button and move the mouse over the content area. Each individual element will be highlighted and choose the element you want to analyze or troubleshoot.
- All HTML code relevant to the chosen element will be shown under “HTML” tab.
- All CSS code relevant to the chosen element will be shown under “Styles” tab. You can enable or disable each CSS property and modify the values online to see the live effect on the element. For example, you can change the font-size, color, margin and padding values of the selected element to check the alignment.
Viewing Complete Styles
Click on the “CSS” tab (next to “HTML” tab) and select the required CSS from the dropdown to view the complete styles.
Viewing CSS Box Model
When the element is highlighted, the complete CSS box model with margin and padding will be shown under “Layout” tab.
The values of the margin and padding can be directly modified to see the live effect on the element.
Checking Page Loading Speed
Download Firebug and start improving your designing skills today.