I use the Firebug Firefox extension about 1 time every 3 minutes, on average, when I’m at work. It’s an amazing tool to boost your productivity while developing and help you hone these HTML/CSS/DOM Scripting skills.
It’s full of useful features I now can’t do without and I totally, totally love it. But after using it for some time, I found out there are some little things I’d love Joe Hewitt to incorporate in the next version.
- Auto-inspect. I’d love an option which would set the firebug pane to inspect as soon as I press F12. Sure, I use Firebug for other uses too, but 99% of the times I fire it up is to check some element’s padding or margin. An Auto-Inspect toggle would be just perfect.
I’d love a special section in the Style tab on the right, where all the styles of an elements should be gathered, no matter what rule they’re inherited of. That would be great to check i.e. the font-size of an element without having to scroll all the way down to find a rule.Found it! Options > Show computed style.- I’m not putting my hand on this, but I see there’s no colour-coded text in the Script tab, meaning that it’s a chore to scan down all the javascript related to a page. Some colour would really pay justice.
- Better search functionality. I’d love a “Find Previous” option in it. Yet again, is there one that I’m oblivious of?
- Maybe some “Select parent tag” – “Select sibling tags” on the top? For those pesky big HTML files, full of divs.
Please note that I use Firebug mostly for HTML/CSS work and not so much for (Java)scripting. Also, I’m not a Firebug power user, so if any of these things actually exist in there don’t hit me, please.
10 comments on this post
Tom #1
03.Feb.07
You can do the auto-inspect thing by using cmb+shf+c on a Mac, or ctl+shf+c on Windows. It opens the Firebug pane and starts inspecting right away. Some times this shortcut conflicts with the web developer toolbar though and shows you the CSS
Hope that helps.
I would love to see your other requests happen too though they would be really useful.
Joe Hewitt #2
03.Feb.07
Hi Zaharenia! Let me answer some of your requests….
You can hit Ctrl+Shift+C to “auto-inspect”.
There is no “Find Previous” (yet), but you can hit enter to “Find Next”.
While inspecting, Ctrl+Up will select the parent tag, and the up/down keys will inspect siblings.
Sugar #3
03.Feb.07
@ Tom: Unfortunately, ctrl+shift+c, as you said, shows my web developer’s toolbar CSS. Oh well, let’s hope for a different shortcut.
@ Joe: Thanks for your quick (nay, instant) answer. As Tom mentioned, unfortunately the auto-inspect shortcut conflicts with Web Developer toolbar “View CSS” one. Maybe it’s too much to ask, but every designer I know has both extensions installed, and we’d love a different shortcut!
I knew about the “Find Next” functionality, but I often find myself in dire need of a “Find Previous” one, since I keep typing Enter for at least a time more.
And I didn’t know about those parent/sibling shortcuts, thank you, it’s a blessing.
Joe Hewitt #4
03.Feb.07
I’ll think about supporting a different shortcut, but in the mean time, you can configure Web Developer to change its Ctrl+Shift+C shortcut to something else to free it up for Firebug. Go to the “Keys” section under Web Developer’s Options dialog.
That’s what I’ve done, at least. I use Ctrl+Shift+C a lot and it’s in a really convenient place.
cosmix #5
03.Feb.07
What I’d like to see in Firebug is an integrated colour picker. That’d certainly help streamline the CSS editing workflow. And, yes, I know there are other extensions that offer that functionality; I’m referring to an integrated one. Preferably one that works in all three main platforms.
Sugar #6
03.Feb.07
@ Joe: I guess that’s what I’ll do, Joe, thanks for your feedback.
@cosmix: That’d be a great addition too, I agree. But will we ever stop demanding for more after that?
cosmix #7
03.Feb.07
That’s not exactly relevant to this specific request. It’s the wrong way to go about this, Sugar. As a web designer, I am sure you often you need to play around/experiment with colour combinations while editing CSS. A colour picker (for a designer, not a programmer) is a core tool and — it seems to me — a natural addition to Firebug, considering its capability to edit and instantly apply HTML/CSS modifications. Or, if you prefer, I find the lack of a colour picker kind of frustrating considering how good the extension is otherwise. And while some of us have become comfortable with hex colour codes over the years, a colour picker remains an oft used tool for a lot of designers. Bleh.
Sugar #8
03.Feb.07
Don’t bleh me, you
I didn’t automatically tagged the colour picker as unnecessary with my above comment, you know.
cosmix #9
03.Feb.07
Firebug Decreases Blog Development Time » Left at Sunrise #1003.Feb.07
[...] But of course, don’t just take my word for it. Here are some other people’s thoughts on this wonderful little tool available here, here, here, and here. [...]