Eric Wendelin's Blog

10 Things you didn’t know about Firebug

July 10th, 2007 | Category: Firefox, Tools

I have worked with a lot of web development tools, but Firebug blew me away. Firebug is an extension for Firefox used for debugging and optimizing CSS, JavaScript, HTML…and more.

There are a few things that a lot of developers don’t know about Firebug that I would like to share with you today.
Firebug Net tab

  1. You can monitor the load time of your JavaScript by going to the “Net” tab. Bonus: Firebug colors requests that are served from your cache in a lighter gray so you can optimize your cache use.
  2. Right click on a breakpoint to add a condition.
  3. Using console.log to print messages to the console is great, but did you know you can group messages by calling ‘console.group(”groupname”)’ and ‘console.groupEnd()’?
  4. Use console.profile() and console.profileEnd() to report on time spent in each function hit, or you could just use the Profiler.
  5. If you mouse over a color in the CSS tab, it shows you a swatch of that color!
  6. Not only can you see the HTML of your page change in real-time, you can change it whenever you want.
  7. If you are using a very high resolution and Firebug is hard to read, just click on the bug and select ‘Text Size > Increase Text Size’
  8. You can use the command ‘debugger;’ within your JavaScript to have Firebug stop execution at that point in the code and bring up the Firebug panel.
  9. You can log calls to specific function by simply right clicking the function name in the Script section and choosing: ‘log calls to “myFunction”‘.
  10. And FINALLY…you can use Firebug in IE, Opera, and Safari (limited functionality) by downloading Firebug Lite!!

Now if you still don’t intend to use Firebug, then you must have spent a lot of money on something that probably isn’t much better.

Popularity: 12% [?]

13 Responses so far

  1. Ben July 11th, 2007 1:09 pm

    Interesting. Didn’t realize firebug was available for anything other than firefox/mozilla.

  2. GodFoca August 12th, 2007 2:05 pm

    One of the neatest things I learned a couple days ago:

    When editing measurements in the Style or Layout tabs, you can use arrow up or down to increase/decrease the value by 1 (margins, borders, paddings, positioning, sizing, everything! :))

  3. Eric August 12th, 2007 2:31 pm

    Wow, that is handy.

  4. Andrea August 12th, 2007 3:12 pm

    Great tip, godfoca. And - trying it out right now on this same page - I see that it doesn’t work with units only, but also with Enumerables like text-align (left, right, center). That’s the best tip I’ve had in a while.

  5. Ann August 13th, 2007 7:38 am

    Terrific tips. Didn’t know you could use Firebug commands within your scripts - that will be really handy. Didn’t know about Firebug Lite, either - great! MS’s development add-on is a bit of a downer… Thanks for posting this list.

  6. Adam August 13th, 2007 8:35 am

    I’ve been using Firebug since I started web development and I love it. I think its one of the greatest tools available

  7. Anonymous August 20th, 2007 12:22 pm

    Nice list here as well Firebug Tips and Tricks

  8. Benjamin Kudria August 20th, 2007 1:23 pm

    Two more: just like hovering over a color, you can also hover over an image in a CSS file, or an img tag, to preview that image.

    If you’re editing the CSS on the fly, and you’re struggling to remember all the changes to stick in the real CSS file, click the CSS tab in the main tab bar to view the new CSS file. Saved me a lot of time once I’d discovered it!

  9. Patolucas August 20th, 2007 2:10 pm

    About the cursor up/down:
    It works not only for ‘enumerables’ or values. Any property and value can be cycled with the cursor (even named colors, and -moz properties).
    And numerical values go up and down by 1 with the cursor; use Page Up/Page Down to shift by 10.
    And not only in the right hand panel: If you edit i.e. a width in table, you can cursor it up/down within the html tab.

Trackbacks

Leave a reply