How to use firebug to troubleshoot a webpage

I’ve been wanting to write a tutorial on firebug bet never remember to because when I do remember it’s right after the “emergency” and it’s too late to really take screenshots. I want to thank Chris Coyier for telling people about this add-on in one of his online videos. If you haven’t checked out his CSS Tricks website I highly recommend it. I also recommend his “Digging Into WordPress Book”.

What you need

This should be fairly obvious but you will need to have two things installed on your computer in order to follow along. Please download and install both of these two items.

1. Download FireFox and install
2. Download FireBug and install

What is FireBug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug allows you to have a “live” online WYSIWYG editor/preview kind of like Dreamweaver. What I mean by “live” is Firebug can’t change the code on the website permanently, but it can make the items you are currently viewing move around to give you a sort of preview.

Once you make the changes and find that everything looks good, you still have to edit the file on the server using your favorite program/online editor.

Now I know some of you might be saying ”I have dreamweaver why don’t I just use that. Make the changes localy and then sync dreamweaver with the server”.

I would then answer you “You would be correct if you were working on your OWN site and the files were static HTML.” Where firebug is a life saver is when you work with online programs like WordPress because programs like Dreamweaver can’t properly show you the output of the PHP scripts on the page.

How do I run Firebug?

Glad you asked! You can either just hit your “F12” key while your Firefox program is open or you can go to “Tools” menu and then select “Firebug”.  (Click the Picture to see a more detailed screenshot).

Now on to the tutorial

I am probably guessing you have already tried by now running “Firebug” and might feel overwhelmed. If you are, don’t be.

Why am I going to use Firebug today?

To put it bluntly when I released my new theme for my website I forgot to code the CSS for the comments section of my blog. I found out about this because I had just released a re-issue of an article about intel’s WiDi Display Technology and John commented on the post and the comment did not look pretty.

Instead of logging into WordPress and figuring out what class I gave the comments section let’s use Firebug to find that out and then play around with the code live to make sure that everything looks the way it should. Once we are happy let’s update WordPress with the CSS we created in Firebug.

Here’s of the shot before the CSS markup was added. (I still can’t believe I missed this before releasing the theme!)

Let’s hit “f12”. Firebug pops up. It should look something like this:

I am now go click on the “+” signs and drill down to the section on responses called “commentlist”.

Notice when you hover your mouse over the different area’s the selection on the web page will get highlighted?

To the right of the firebug logo you will see “”HTML”, “CSS” and “Script”. Click on CSS and then the “Edit” button. This will actually let you make changes to the CSS on the fly on effect this one browser session.

In this case I am going to add a few lines of CSS markup to fix the presentation behavior.

.commentlist {
	padding: 0;
	text-align: justify;
	}
.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 25px;
	list-style: none;
	}
.commentlist li ul li {
	margin-right: -5px;
	margin-left: 10px;
}
#page h3{
        padding: 5px 5px 10px 15px;
}

The first 3 entries are for the comment lists and the last one is for the line “One Response to..” header. I know some of you might be saying why didn’t you put the “#page h3” line about the .commentlist items. While I agree it would make finding the “#page h3” item easier again I wanted to show you the order doesn’t really matter in CSS unless there was another item AFTER the tag in question that extended/overwrote the original style.

After entering this code I can see that layout looks much better now that the response is some much further from the edge?

Hope this helps give you introductory to Firebug and some of it’s unique abilities!

Tags: How To

This entry was posted on Sunday, January 10th, 2010 at 4:29 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.