10 Things you didn’t know about Firebug
10
Jul
2007
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.
- 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.
- Right click on a breakpoint to add a condition.
- 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()’?
- Use console.profile() and console.profileEnd() to report on time spent in each function hit, or you could just use the Profiler.
- If you mouse over a color in the CSS tab, it shows you a swatch of that color!
- Not only can you see the HTML of your page change in real-time, you can change it whenever you want.
- 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’
- 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.
- Log calls to specific function by simply right clicking the function name in the Script section and choosing: ‘log calls to “myFunction”‘.
- 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.
Interesting. Didn’t realize firebug was available for anything other than firefox/mozilla.
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! :))
Wow, that is handy.
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.
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.
I’ve been using Firebug since I started web development and I love it. I think its one of the greatest tools available
Nice list here as well Firebug Tips and Tricks
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!
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.
[...] 10 Things you didn’t know about Firebug [...]
[...] door for more Firebug extensions. Go get Firecookie and try it out! You also might be interested in 10 things you didn’t know about Firebug. addthis_url = ‘http%3A%2F%2Feriwen.com%2Ffirefox%2Ffirecookie%2F’; addthis_title = [...]
[...] you haven’t already, you might want to check out 10 more things you may not know about Firebug. addthis_url = ‘http%3A%2F%2Feriwen.com%2Ffirefox%2Fediting-layout-in-firebug%2F’; addthis_title = [...]
[...] 10 Things you didn’t know about Firebug by Eric Wendelin [...]
firebug lite really sucks… if you are using opera you may try the dragonfly. it’s like firebug
@noname:
Firebug Lite was the best available when this post was written over a year ago. It has also gotten much better recently.