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.
- 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.
- 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
- 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
- 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.
- Through this section one can easily examine the box model of an element: content size, padding, offsets, margins and borders.
- 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).
- If the page on which we are working contains multiple stylesheets, then we will be able to select the desired stylesheet.
- The main region where the CSS code is displayed.
- Easily modify CSS properties.
- 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.
- Dropdown button from which we can select the desired script file.
- Debugging functions: continue, step in, step over and step out. They only kick in when code execution reaches a breakpoint.
- Main window. Here we set (and remove) breakpoints, as well as inspect Javascript code.
- Similar to the DOM panel, the Watch section prints out object methods and parameters for currently debugging code.
- Shows the stackment of functions in real time.
- 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.
- Requests can be filtered according to their type.
- 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.
- 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.
- The searching and filtering section.
- Here the results stack up, in our case there is only one result.
- 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.
- 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.
- With this button we can add multiple overlay images for the current page.
- Overlays list, from here we apply or delete the overlay.
- 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:
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )James June 18th
First comment! WOO! Also thanks useful information
( )Kevin Quillen June 18th
I just wish Firebug was a little easier on the memory usage. It sseems to blow my Firefox up after a few hours.
( )Shane June 19th
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
( )Dan June 19th
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!
crysfel June 18th
i really like firebug! i can’t work without it
( )Jarod June 18th
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.
( )Dario Gutierrez June 18th
Is the first time I hear about firebug but looks good!
( )Harry M June 18th
I’ve been using it for a while, it’s a very useful developing tools
( )Binny V A June 18th
However, Firebug can make your firefox very unstable. If possible, use it in a different profile.
( )Jonathan June 18th
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 June 18th
CodeBurner, PixelPerfect, FirePHP now adding on my Firefox..
( )thanks!
Michael Thompson June 18th
stuff
( )more stuffaravind June 18th
I cannot even imagine a day without firebug!
( )Phil Buckley June 18th
You forgot the best addition from last week – Google’s Page Speed, like YSlow but more data and more useful
( )Henrik Pedersen June 18th
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
( )Mustardamus June 18th
Using FireBug for ages and it’s a everyday tool I can’t life without. Nice roundup!
( )henry June 18th
firebug lite for IE,Opera, Safari
( )http://getfirebug.com/lite.html
SohoInteractive June 18th
Thanks for the link, Have you tried it?
F.
( )Myfacefriends June 18th
thanks for the link., how about in chrome?
( )Jan Jaap June 18th
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.
Joe June 18th
Firebug Lite is simply a javascript tool so it should work in any modern browser including Chrome
Matthijn June 18th
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@ June 18th
too bad the only thing safari is good for is browsing on my iphone
( )elkaz June 19th
Typical mac user.
( )Kasper Lau June 18th
Firebug is the best tool for firefox evah
( )Dominik June 18th
Just install Safari 4—no more need of using Firebug.
( )Jeffrey Way June 18th
I beg to differ.
( )Kevin Quillen June 18th
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.
Arol June 18th
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
( )Nivanka June 18th
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.
( )Joseph Pecoraro June 18th
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.
( )Joseph Pecoraro June 18th
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
Craigsnedeker June 18th
Using and lovin Firebug
( )Chris Robinson June 18th
dunno were I would be without the good ol’ firebug
( )Nathan L Smith June 18th
FirePHP can also be used for Rails (http://github.com/smith/firephp_rails/tree/master), JavaScript (http://nlsmith.com/projects/console/) and more (http://www.firephp.org/Wiki/.)
( )Montana Flynn June 18th
excellent breakdown of the features, I mostly have used firebug for looking for CSS selectors and code, but this opens a few doors!
( )Diego SA June 18th
Looks interesting! First I need to find some time to read this article, then I’ll enjoy these features deeply. Thanks a lot!
( )Matthew Johnson June 18th
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 June 18th
Nice Tut Thx!
OffTopic: Someone has seen the new Safari Browser???
( )mupet June 18th
I love firebug, very useful
( )Damon Medic June 18th
I use firebug for some things, but I also like to just do it raw with view source to notepad.
( )ayodio June 18th
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.
( )Shane June 19th
Point 5 is the most useful
( )Manish June 19th
Not useful at all!!!
( )Hezi June 19th
FIREBUG IS ROCKN’ROLL!
( )Martyn Web June 19th
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….
( )kilinkis June 19th
i love firebug!
( )Arnold June 19th
I would add to the list Google´s Page Speed:
http://code.google.com/speed/page-speed/
Cheers
( )Stefan Ashwell June 19th
Firebug is possibly the most useful plugin I have, use it all the time!
( )Siggi Arni June 19th
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 June 19th
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….
( )Tsedaka June 19th
Waow! There is Firebug for IE? Great! It’ll change my life
( )e11world June 19th
I’ve used Firebug a few times but just can’t get used to it for some reason.
( )jem June 19th
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 June 20th
Firebug has better interface (easier to enable/disable css properties etc).
( )Dan June 19th
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.
( )Mike June 19th
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..
Carl - Web Courses Bangkok June 19th
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.
( )rainwebs June 20th
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.
( )sc June 20th
“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 June 20th
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 June 20th
Pixel Perfect?? Looks nice… installing. Thx. Good job, Marius.
( )kisin June 21st
how can i make it run more efficiently?
( )the memory usage is to big for me
jegan June 21st
Thanks for info. It helps me explore firebug further
( )Aleksandar Tasevski June 23rd
Isn’t the “Right click \ Suspend Firebug” after using it helping in lowering the memory usage? However, i never do that, i click F12 on every website i open
( )Yuriy June 23rd
So what about FireCookie (https://addons.mozilla.org/ru/firefox/addon/6683).
“Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser”
This plugin add new tab to FirebBug. In this tab you can do any manipulation with your cookies like add, delete, change …
( )Berogra June 29th
I found FireBug not long ago after reading about it in a past Nettuts tutorial. It is really helpful because you can edit your website on the fly. “I don’t like that font” or “that border looks shoddy” is quickly fixed. It’s a good thing that you wrote this post so the great plugin that is FireBug can be spread amongst all web devs!
( )unknown July 15th
Hey guyzz which one’z betta Dreamweaver or this FireBug??
( )teags July 21st
same question… Dreamweaver CS4 or Firebug?
( )PHP Web Development October 9th
Firebug ftmfw, especially when using xpath to find certain sections of pages and the reverse xpath check you can use to check your own created query.
( )Joe October 11th
Hmm. I’m still undecided.
( )