View Webpage Source HTML and CSS Using Firebug in Firefox

Firebug is an add-on in Firebox browser used to troubleshoot any webpage by looking into the source HTML, CSS and JavaScript. This is similar to the developer console with more useful options for webmasters to check individual elements on a webpage.

How to Install Firebug?

Open Firefox add-ons by through the menu to “Tool à Add-ons” or directly open the URL “about:addons”.

Viewing CSS Options in Firebug

Search for “Firebug” add-on and click the install button to add it to your Firefox browser.

Installing Firebug in Firefox

Once added the Firebug icon can be seen along with other tool icons as shown below:

Firebug Icon in Firefox

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.

Viewing HTML and CSS of an Element

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.

View CSS Files in Firebug

Viewing CSS Box Model

When the element is highlighted, the complete CSS box model with margin and padding will be shown under “Layout” tab.

Viewing CSS Box Model with Grid View

The values of the margin and padding can be directly modified to see the live effect on the element.

Checking Page Loading Speed

Another important use of Firebug add-on is to check the loading time of HTML / CSS / JavaScript under “Net” tab. This helps you to analyze which part of the code takes long time to load and take corrective action accordingly.

FREE RESOURCES AT WEBNOTS

WebNots – A Tech & Web Platform

WebNots is a knowledge sharing platform for webmasters and tech geeks. We have published 1000+ free articles focusing on website building and technology. We share our experience and knowledge through blog articles, demos, eBooks, videos and glossary terms for the benefit of webmasters and tech community.