Getting the most out of Firebug

10 Reasons Why You Should Be Using Firebug

on Jun 18th 2009 with 73 comments

Firebug is one of the most popular tools used by web developers. In this article, we’ll take a closer look at ten of its most attractive features.

1. Console

The first thing you’re going to notice when opening Firebug (either from the
status bar or using the ctrl+F12 key combination) will be the Console panel. After a quick look, one might think that it is an alternate version of the Error Console
(Ctrl+Shift+J). Common features between the two are:

  • logging of errors, warnings and notices
  • ability to run Javascript code

But Firebug extends the Firefox functionality, so it can do
much more, such as:

  • logging errors for Javascript, CSS, XML, XMLHttpRequest (AJAX) and
    Chrome (Firefox internals)
  • run Javascript code upon the current webpage
  • additional Javascript object is put at disposal (console)

Let’s look over some examples built upon the console object. Imagine running the
following HTML file.

<html>
    <head>
        <script type="text/javascript">
            console.time(1);
            console.log('the script section has started executing');
            console.warn('warning message');
            console.error('error message');
            console.info('info message');
            console.log(
                'finishing script execution\n',
                'execution took:'
            );
            console.timeEnd(1);
        </script>
    </head>
</html>

This will generate the following result.

2. HTML

The second panel, and the one in which I’m sure you’re going to spend a lot
of time, is split among several sections which we will review below.

  1. This button is equivalent to the “Inspect Element” in a webpage
    context menu. Apart from being helpful with quickly picking elements in page,
    it also outlines the currently selected element.
  2. In this section, we have the hierarchy of the currently
    selected element and the ability to perform a series of actions (on every
    individual component of the hierarchy), like:

    • copying inner HTML
    • creating XPath expressions
    • attaching event observer (and logging in the Console panel)
    • deleting element
    • editing element and child nodes
    • moving the element in the DOM tab for inspection
  3. The main window of the panel; useful for traversing through the
    HTML document, quick modification of code and spotting broken code (like
    closing a div too early). The contextual menu offers the same set of functionality
    like section nr. 2
  4. In this section the computed style of the current page or element are
    displayed. The ability to actively modify styles and inspect CSS
    inheritance are its most valuable features.
  5. Through this section one can easily examine the box model of
    an element: content size, padding, offsets, margins and borders.
  1. The DOM section upon access generates a list with all, of the currently
    selected elements, methods and properties.

3. CSS

The main difference between this panel and the Style section under HTML is
that here you can work on uncomputed styles. I’ll outline and number the sections
(and features this time).

  1. If the page on which we are working contains multiple stylesheets, then we will be able to select the desired stylesheet.
  2. The main region where the CSS code is displayed.
  3. Easily modify CSS properties.
  4. Easily dissable CSS rules.

4. Script

Sometimes, when writing Javascript code, you have to get your hands
dirty. Most of the time, you’ll find yourself working with the
Console panel; only in extreme conditions will that make you jump to the Script
panel. Given those extreme conditions (which are bound to happen), let’s review this panel, and start familiarizing ourselves with it.

  1. Dropdown button from which we can select the desired script file.
  2. Debugging functions: continue, step in, step over
    and step out. They only kick in when code execution reaches a
    breakpoint.
  3. Main window. Here we set (and remove) breakpoints, as well as inspect
    Javascript code.
  4. Similar to the DOM panel, the Watch section prints out object methods
    and parameters for currently debugging code.
  5. Shows the stackment of functions in real time.
  6. List of currently active breakpoints. Only breakpoint removal can be done
    from here.

5. DOM

The same as HTML->DOM. Given the fact that nothing differs from what was mentioned before, we’ll skip to the next section.

6. Net

Curious how long your page took to load? Or do you
want to know which request takes the most time to complete? Thankfully, this, too, can be accomplished via the Net panel.

  1. Requests can be filtered according to their type.
  2. Every request is shown in this section. At the end of the requests list
    we see a summary of them: number of requests, size, how much was cached
    already and total time they took to complete.
  3. More details can be revealed, as: HTTP headers, response and cache (same
    as response)

Performance Testing

Need to test the performance of a specific function or loop? Use the Firebug’s “timer” feature.

function TimeTracker(){
 console.time("MyTimer");
 for(x=5000; x > 0; x--){}
 console.timeEnd("MyTimer");
}

Three step. We begin by calling “console.time” and pass in a unique key. Next, we insert our code. Finally, we call console.timeEnd, and once again, pass in our unique key.

7. Reference

This is an additional panel provided by CodeBurner, a Firebug
add-on. As its name states, through this panel you’ll have quick access to your HTML
and CSS code. Even if the panel is self-explanatory, we will still look over
it.

  1. The searching and filtering section.
  2. Here the results stack up, in our case there is only one result.
  3. Compatibility panel for the latest major browser versions. Yes, Chrome is
    not in this list, but Chrome uses the same engine as Safari, namely Webkit, so if
    it’s Safari compatible it will work in Chrome as well.
  4. And if the information displayed in this panel isn’t enough, you can find more info by accessing this link, like: examples, compatibility in more browser
    versions, description, etc.

8. PixelPerfect

If you’ve ever done PSD slicing, you know how time consuming the measurement
of spacing in between composition elements can be. That’s where PixelPerfect proves it’s
power. Having this add-on in your toolbox will help you perform the perfect slice.

  1. With this button we can add multiple overlay images for the current page.
  2. Overlays list, from here we apply or delete the overlay.
  3. Overlay settings section.

9. YSlow

Another Firebug add-on developed by Yahoo!, which can suggest speed improvements
based on a series of tests performed.

Through YSlow, we can grade our website’s overall performance. We can easily
spot issues which can be improved, and a series of recommendations are available
as well.

Apart from the pie charted statistics, we also have JSLint and Smush.it at our disposal.

10. FirePHP

Our last, but not least, important Firebug component is FirePHP. With this
add-on, we can transparently send information (warnings, errors, logging, info)
to the Console panel from our PHP code. Example usage from FirePHP’s website:

<?php

    FB::log('Log message');
    FB::info('Info message');
    FB::warn('Warn message');
    FB::error('Error message');

?>

Closing

I hope this small list of Firebug panels/add-on will make your life as a
web person easier — as it did to me. In the end, we all know that
bugs are bound to happen, so there’s no excuse for not being prepared.

Follow these links to download the add-ons:

Tags: firebug
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

A web developing enthusiast with an absurd obsession with clean code.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • James

    First comment! WOO! Also thanks useful information

  • http://www.twitter.com/kevinquillen Kevin Quillen

    I just wish Firebug was a little easier on the memory usage. It sseems to blow my Firefox up after a few hours.

    • http://www.freshclickmedia.com Shane

      I developed a website that was making polling a server every few seconds using AJAX. I left it running overnight and saw that firefox memory usage had gone through the roof. I thought it was my code – but it was Firebug :)

      • http://www.hackzilla.org/ Dan

        Firefox (3.0) used to crash on my at least 3 times a day.

        I have about 30 tabs open, and develop lots of AJAX. Reading your posts, it sounds like Firebug was the cause, but I can’t live without it.

        Upgrading to Firefox 3.5 RC1, and no crashes yet!

  • http://www.quizzpot.com crysfel

    i really like firebug! i can’t work without it :o

  • http://www.noobcube.com Jarod

    Firebug and the Web Developer Toolbar; I use them just as much as I use a text editor, photoshop, and any other tool we web creatives utilize. Nice little roundup.

  • http://labs.dariux.com Dario Gutierrez

    Is the first time I hear about firebug but looks good!

  • http://harrymahardhika.com Harry M

    I’ve been using it for a while, it’s a very useful developing tools :D

  • http://www.bin-co.com/blog/ Binny V A

    However, Firebug can make your firefox very unstable. If possible, use it in a different profile.

  • http://jfoucher.com Jonathan

    Firebug is definitely useful, but it’s a pain in the … Pages stop loading at the first error, huge memory usage, and stability issues. With firebug addons, it’s even worse.
    I switch between firefox and chromium, which has features similar to what firebug brings, relative to DOM and HTML anyway.

  • arnoldC

    CodeBurner, PixelPerfect, FirePHP now adding on my Firefox..
    thanks!

  • Michael Thompson

    stuff
    more stuff

  • http://thedesignsuperhero.com/ aravind

    I cannot even imagine a day without firebug!

  • http://www.1918.com Phil Buckley

    You forgot the best addition from last week – Google’s Page Speed, like YSlow but more data and more useful

  • http://www.hsp.dk Henrik Pedersen

    Firebug have only gived me trouble… My firefox gone unstable, and my hole pc slowed down when i was using this thing. And im running a powerfull AMD Athlon 64 X2 Dual Core 2.1 GHz (for each core) and with 4 GB of ram, and this thing put my machine onto it’s knees so go away evil thing

  • http://mustardamus.com/ Mustardamus

    Using FireBug for ages and it’s a everyday tool I can’t life without. Nice roundup!

  • henry

    firebug lite for IE,Opera, Safari
    http://getfirebug.com/lite.html

    • http://www.sohointeractive.com SohoInteractive

      Thanks for the link, Have you tried it?

      F.

    • http://myfacefriends.com Myfacefriends

      thanks for the link., how about in chrome?

      • http://doublejweb.net/ Jan Jaap

        I think it should work for Chrome too, as this is an additional JavaScript file which you include.

        As for Opera, I think that the Dragonfly developer tools cannot be exceeded by Firebug.

      • http://www.joestrong.co.uk Joe

        Firebug Lite is simply a javascript tool so it should work in any modern browser including Chrome

  • Matthijn

    Should be called, 10 Reasons to use Safari, the default Safari developper tools (must be set on in the settings panel). blow firebug away. :)

    • m@

      too bad the only thing safari is good for is browsing on my iphone

    • elkaz

      Typical mac user.

  • http://www.l4u.dk/ Kasper Lau

    Firebug is the best tool for firefox evah

  • http://dominikporada.com Dominik

    Just install Safari 4—no more need of using Firebug.

    • http://net.tutsplus.com Jeffrey Way

      I beg to differ.

      • http://www.twitter.com/kevinquillen Kevin Quillen

        That doesn’t help really- because I have seen things render on Safari Windows a little different than Safari Mac. Plus I am attached to WebDev when it comes to CSS issues.

    • http://www.misautocaravanas.com Arol

      One thing I miss a lot in Safari web inspector is that option in firebug which shows you the ajax requests content. Safari web inspector only shows you the header.

      If I’m wrong and thats a way to view the requests content PLEASE TELL ME!!

      Nice post ;) I love firebug

  • http://whynotonline.com Nivanka

    firebug has been helping a lot with my developments, its really great. About memory firefox itself eats up memory; its true but its my favorite. when it stucks what I do it that kill that process and starts it again, and restore the previous session.

  • http://blog.bogojoker.com Joseph Pecoraro

    YSlow has been a great tool for optimizing web-site performance. Others have taken notice and put their own spin on things. Google recently came out with a similar tool with some interesting automatic features:
    http://code.google.com/speed/page-speed/

    Some features worth mentioning:
    - It detects and automatically minifies javascript and css files that would benefit from it and makes it so you can easily download the minified versions.
    - The same thing with optimizing images. Automatic and ready to download.
    - It shows you comparisons between the original and minified/optimized versions (file sizes, percentage smaller, etc).

    Although much of it is the same as YSlow, I think its worth taking a look at it. It seems more active then YSlow because it makes an effort to do a lot of work behind the scenes for you.

  • http://blog.bogojoker.com Joseph Pecoraro

    There is more the to Firebug Console and Command line APIs then what is shown above. There are command line functions such as $() [get by id] and $$() [get by css selector], and much more. There is even auto-completion with the tab key!

    What is neat is that many of these have been adopted and work in other browsers consoles (like Safari’s Web Inspector). Each of these functions gets gracefully overwritten if the site itself has functions with these names, so if you’re site has jQuery then the $ will work as you’d expect it to.

    To learn more about the Command line and Console APIs check out:
    http://getfirebug.com/commandline.html
    http://getfirebug.com/console.html

  • http://craigps.co.nr/ Craigsnedeker

    Using and lovin Firebug

  • http://wp.contempographicdesign.com Chris Robinson

    dunno were I would be without the good ol’ firebug

  • http://nlsmith.com/ Nathan L Smith
  • http://blog.complimedia.com Montana Flynn

    excellent breakdown of the features, I mostly have used firebug for looking for CSS selectors and code, but this opens a few doors!

  • http://www.dsaportfolio.com.br Diego SA

    Looks interesting! First I need to find some time to read this article, then I’ll enjoy these features deeply. Thanks a lot!

  • http://www.seventhfury.com Matthew Johnson

    Awesome post, I just found out about this app a few days ago and I already agree that it’s one of the best web development tools along with others such as xScope (one of my faves — http://iconfactory.com/software/xscope).

    Thanks for the tips on how to use Firebug, I’m looking forward to learning more about it!

  • esck21

    Nice Tut Thx!

    OffTopic: Someone has seen the new Safari Browser???

  • http://wordtaps.com mupet

    I love firebug, very useful

  • Damon Medic

    I use firebug for some things, but I also like to just do it raw with view source to notepad.

  • ayodio

    I just realised how in love with png’s I got since I’m web developing. I couldn’t help noticing you’ve use jpg’s for your images which definitely don’t look very good for screen shots f applications.

    I was also already in love with firebug and hopefully this article will make me learn few more tricks, as long as I manage to stand the jpg’s.

  • http://www.freshclickmedia.com Shane

    Point 5 is the most useful ;)

  • Manish

    Not useful at all!!!

  • http://twitter.com/heziabrass Hezi

    FIREBUG IS ROCKN’ROLL!

  • http://www.crearedesign.co.uk Martyn Web

    I have firebug but never really used all the features that come with it. Cleared up a few things for me though and i’ll probably use it a little more from now on….

  • http://www.hellomynameisjuan.com/ kilinkis

    i love firebug!

  • http://www.wender.com.mx Arnold

    I would add to the list Google´s Page Speed:

    http://code.google.com/speed/page-speed/

    Cheers

  • http://www.allisclear.com Stefan Ashwell

    Firebug is possibly the most useful plugin I have, use it all the time!

  • http://svanbergsson.com Siggi Arni

    You also might want to check out Smush.it.

    It parses through the webpage that you are currently viewing and compress all the graphics that it can find to a much smaller PNG version.
    Very handy when optimizing your graphics :)

    http://smush.it/

    But im definitely going to take a look at PixlePrefect

  • karlo

    Used Firebug and WD toolbar for a long time now and I feel they are vital to any designer/developer, who wants to understand and leverage web technologies. I would hate to go back to the days of change -> save -> refresh. Thanks for the list….

  • http://woobzine.com Tsedaka

    Waow! There is Firebug for IE? Great! It’ll change my life :)

  • http://www.e11world.com e11world

    I’ve used Firebug a few times but just can’t get used to it for some reason.

  • jem

    Can’t live without it. Its nice some other browsers have built-in dev tools, but a lot of them are mediocre or plain garbage (IE8).

    Firebug takes the cake, but I will say Safar4 dev tools are quite close behind.

    • Ant

      Firebug has better interface (easier to enable/disable css properties etc).

  • http://dzine-studios.com Dan

    The Safari dev tools are pretty good too. While they’re not nearly as comprehensive as Firefox’s, they don’t take up any additional memory and look damn nice too.

  • http://www.moretechtips.net/ Mike

    Really nice list..
    I would like to highlight that under the Net Panel , you can examine params sent on each request.. which is very helpful when debugging AJAX javascript..

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok

    I personally love firebug especially with things like Joomla. firebug really helps you find the cause of that extra padding on a deep deep css element.

  • http://blog.rainer.eschen.name rainwebs

    Although, I’m not a fan of Firefox in general. Firebug is pretty cool for our development. I hope that this implementation will be ported to Chrome and other more modern browser platforms someday.

  • http://nntr.us sc

    “Firebug have only gived me trouble… My firefox gone unstable, and my hole pc slowed down when i was using this thing.”

    i have the same problems as well.

  • Ant

    Thing I don’t like on Firebug is that it “compilate” css code. For example, I wrote in my css file:
    padding: 0px 0px 0px 0px and it will be padding:0 in Firebug.
    Also, you should add “px” after zero manually, otherwise you cannot use arrow keys to change values.

    But it’s great add-on, anyway.

  • Anca

    Pixel Perfect?? Looks nice… installing. Thx. Good job, Marius.

Newer Comments →