#15: Introduction to Firebug

Firebug is an essential Firefox extension for web designers and developers. You are able to quickly target any element on a page to see the markup, the CSS, the layout, and the DOM in an instant. Not only can you see all of this juicy information, you can edit and see the results directly in the browser window. This makes Firebug the go-to tool for debugging CSS trouble. Also indispensable for JavaScript programmers.

Links from video:


  1. John
    Permalink to comment#

    HAHA WOW. I have had this tool on my firefox but havent really played around with it because i didnt know how to use it. Creating my own css from scratch is still a little out of my skill base range, but what i am trying to do is alter themes to make them my own and this tool is really really going to help me out so much. I hated having to look all over the place to find a snipet of code that i had no idea what it did. Now i know!! Super excited to start using this more. Love the blog please keep it going.

  2. dw
    Permalink to comment#

    very nice

  3. Ky
    Permalink to comment#

    This is really helpful. Thanks a lot!

  4. Peter
    Permalink to comment#

    Just starting with html and css. I have heard of firebug and installed it, but didn’t know how to start with it.
    Very helpfull for a beginner.


  5. cats
    Permalink to comment#

    right now Chrome seems more powerful! :)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.