Firebug, The Greatest Firefox Extension Ever

As a blogger, you will eventually come upon a time where you are obligated to deal with your template, but what if CSS and HTML aren’t your thing? Well, you have two choices: pay someone to fix or change something, wait till someone volunteers to help you out, or do it yourself.

Click for full size

This is where Firebug comes into play. It makes CSS and HTML so simple, that you’ll wonder how you ever survived without it. Obviously, you’ll need to have Firefox installed (who doesn’t?) since it’s a Firefox extension. Just in case you don’t have it, here’s the direct download link.

Inspect and Edit HTML Code

One of the best features of Firebug, is the ability to view and edit HTML code, live. When you hover over a certain part of the HTML code, it’s corresponding part will be highlighted in the browser. That can be really handy in finding out what parts of the code affect what parts of the page. Syntax highlighting and a hierarchy of the tags make it much easier to differentiate parts of the code.

Tweak and View CSS Code

When you press the “inspect” button, CSS code of the currently highlighted element will be shown in the right sidebar. It gives you a lot of details on inherited properties, which line the code is located, and the ability to tweak it. One of my favorite features is the ability to temporarily hide an attribute, which can give you a really great idea of what is going on your webpage.

Monitor Network Activity

If something is slowing down your website, but you have no idea what it is, then Firebug can provide that answers! It will give you a detailed description of the amount of requests sent, the total page size, and the total load time. You also have the ability to see the load times of only images, flash, HTML, and a number of different file types.

Here I will fix a problem in the comment form on TheMelvinBlog, just to show you how simple Firebug really is. If you visit one of his posts (eg. Winning The Web Shirt is a Great One!), you can see that the background of the name, email, and website fields are white. White text on a white background, obviously, isn’t a very good idea. Using Firebug, we will solve the problem in less than five minutes.

First, click the little bug icon in the bottom right corner. Next, click the “inspect” button, which will give you the ability to highlight an area of the page. Hover your mouse over the name field of the comment form, you will see the following CSS code:

.textarea {
background:#FFFFFF none repeat scroll 0% 0%;
border:1px solid #CBCBCB;
color:#FFFFFF;
width:280px;
}

As you can see, the value of the color property is “#FFFFFF” which is white. Above it, the “background” property also has the same value, to fix it:
1- Open the style.css file using the theme editor section in the Wordpress dashboard
2- Press ctrl+f to open the find box, and search for “.textarea”
3- Delete “color:#FFFFFF;”, this will turn the text to the default color, black
4- Update the file

See how simple Firebug made it?

I’m sure I didn’t mention tons of features it has, so if you would like to know more about it, just drop by the official Firebug homepage. As for the others, who can’t wait to download it, here is the direct download link.