Widerbug: Widescreen Firebug
If you do any amount of web developing with CSS and JavaScript, it’s probably a safe bet that you use the Firefox and Firebug combo to test ideas, tweak appearance and behavior of pages, and debug problems when they crop up. You might also use a widescreen monitor to provide more screen real estate to flip between your code and the rendered output. In an arrangement like this, the open Firebug panel takes up precious vertical space, while you have plenty of pixels to spare on the side.
After a few trivial changes to Firebug, I’ve modified it to open on the right side of the browser as a sidebar. With the stock plugin, you can achieve a similar layout by detaching Firebug from the current tab and moving its window in the same position, but this has a generally unwelcome side effect: the separate window doesn’t update when you switch tabs. With Widerbug, you can open the Firebug sidebar, and it will keep up with you as you switch tabs and maintain its width.
Works with:
- Firefox 1.5 - 2.0.0.*
Tested on:
- Firefox 2.0.0.11 Mac
- Firefox 2.0.0.11 Windows XP
- Firefox 2.0.0.11 Linux (Ubuntu)
(You may have to temporarily allow command-tab.com to install Firefox extensions. Also, if you’re currently using Firebug, please uninstall Firebug first, restart Firefox, and then install Widerbug. Having both loaded may cause issues, however I haven’t tried.)
While you’re installing plugins, here are a few of my favorites: ScreenGrab!, Web Developer Toolbar, Restart Firefox, and Duplicate Tab (And for completeness, the Photoshop file for the above Install Now button.)
January 19th, 2008 at 5:19 pm
Awesome bro! It’s installed and working beautifully on my firefox on my 15″ MBP.
Word to your mutha.
January 20th, 2008 at 1:28 pm
Super! Thanks!
January 25th, 2008 at 3:51 pm
NOTE: On Mac FF, make sure to dock your firebug before installing. Otherwise, it can become un-dockable.
to fix, go to about:config and search on firebug. Flip the boolean to open in new window to off.
January 28th, 2008 at 9:47 am
or…you got the macheist bundle and get all the same functionality with cssedit 2 — but inside an awesome mac interface.
January 28th, 2008 at 10:21 am
CSSEdit is a killer piece of software with a delicious interface, but its functionality is limited to CSS editing and testing.
Firebug (and, thus, Widerbug) does CSS and so much more. You also get JavaScript debugging and a live console, resource load timeline, complete DOM manipulation, AJAX inspection, script run time profiling, etc. It’s quite the robust utility.
The right tool for the right job :-)
January 29th, 2008 at 8:46 pm
Yo Collin, I plan on loading this up on my ubuntu laptop, I will let you know how it works. :)
January 29th, 2008 at 9:00 pm
Well, In Ubuntu 7.10 and FireFox 2.0.0.11 It works incredibly well… I was able to switch across multiple tabs, intercept JS code on the fly and disable css styles with ease. It even worked well with the “Web developer toolbar” addon. Nicely done.
January 29th, 2008 at 9:57 pm
Thanks for the heads up, Dave! I’ll amend the post.
January 30th, 2008 at 12:52 am
You may have to temporarily allow command-tab.com to install Firefox extensions. Also, if you’re currently using Firebug, please uninstall Firebug first, restart Firefox, and then install Widerbug. Having both loaded may cause issues, however I haven’t tried.)
Um, I did not read that, and I installed it right on top of my existing firebug… It worked seamlessly if you are curious though… No issues, now the firebug icon in the lower right just launches Widerbug
February 2nd, 2008 at 5:10 pm
You are a freak. Nice work.
February 17th, 2008 at 3:10 am
Very nice.
Is its source available?
I also want to customize my firebug and looking examples how you did it helps a lot.
March 27th, 2008 at 11:59 am
Layout idea… would it be possible to have CSS box on top and code view under it in the right side panel?
this seems like it would be much better use of space..