Webpages are made of HTML, CSS and JavaScript. Though popular content management systems like WordPress uses PHP on the server side, web browsers need to receive HTML for showing beautiful content on the frontend. Whether you are a developer, blogger or website owner, it is necessary to check the webpage’s source code in order to understand the structure. In this article, we will explain how to view webpage source HTML and CSS in Firefox.
Firebug Add-on
Firebug is an add-on for Firebox browser that you can use for troubleshooting webpages. It helps looking into the source HTML, CSS and JavaScript files in the backend. This is similar to the developer console with more useful options for webmasters. You can use Firebug add-on to check all individual elements on a webpage.
Related: View webpage source code in Chrome and Safari.
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.
Related: How to enable do not track in browsers?
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.
Download Firebug and start improving your designing skills today.
Leave a Reply
Your email is safe with us.