Oct 14, 2009

Firebug

Can't figure out why your page looks like garbage? Wanna see how someone has used html and css to make a wicked awesome website? Then download the Firebug extension for Firefox.

In my latest post, I talked about using different width and padding settings to render a page (almost) perfectly on a user's screen, regardless of screen resolution. Well frankly I didn't really get much out of the descriptive material the author provided on their page. I didn't help to look at their CSS, since I had to jump back and forth from HTML to CSS to see what was being styled where.

This is where Firebug comes in. As an extension to Firefox, the program simply runs through the browser. You can use it to shift through their HTML, and Firebug will hightlight on the page which areas are using that portion of the html. It also provides you with a sidebox showing the CSS specifically provided for that portion of the HTML and it shows you what CSS it inherits. Defininetly a way cool feature! I recommend checking it out if your having any trouble styling your webpage.

Here is a picture of Firebug at work:

7 comments:

  1. Hi Colin,

    This is truly a cool tool! I've used firebug in the past to troubleshoot an application error but didn't consider it for development. Thanks for the post.

    ReplyDelete
  2. I forgot all about firebug. This really helps when you are trying to see where things are happening on a web page. Thanks for the reminder, I'll be using this soon.

    ReplyDelete
  3. I've used firebug in IS247.. and ran across it in my archives the other day but haven't done anything with it. As I recall there were a number of plug-ins for Firefox that were quite useful.

    ReplyDelete
  4. Not only does firebug help out with HTML and CSS but I used it for debugging my javascript as well. Definately a tool to have in your toolbox.

    ReplyDelete
  5. Colin,

    Thanks for the reminder of this tool. Since i don't regularly use the Firefox browser i often forget about this tool. I'll have to download it and start using it, could push me to use Firefox by default.

    ReplyDelete
  6. One thing to note about Firebug is that it's notoriously known for bogging down your browsing. It's definitely a powerful application, but if you begin to notice your browsing experience slowing down, you may want to consider uninstalling this little tool. It should be ok for most systems, but there are many reports from people in the past who have had issues with it.

    ReplyDelete
  7. Hey Colin. Now I realize how you managed our website design. Good work, our design and the post!

    ReplyDelete