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 spare pixels on the side go unused.

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.

Release History

  • Widerbug is Retired
    January 6, 2011
    Firebug 1.9.0 added widescreen support, making Widerbug obsolete
  • Widerbug 1.5.0
    Released on January 25, 2010
    Merged Firebug 1.5.0 changes, for Firefox 3.6.*
  • Widerbug 1.4.0
    Released on July 17, 2009
    Merged Firebug 1.4.0 changes, for Firefox 3.5.*
  • Widerbug 1.3.3
    Released on May 25, 2009
    Merged Firebug 1.3.3 changes, for Firefox 3.0.*
  • Widerbug 1.3.0
    Released on Jan. 8, 2009
    Merged Firebug 1.3.0 changes, for Firefox 3.0.*
  • Widerbug 1.2.1
    Released on Sept. 13, 2008
    Merged Firebug 1.2.1 changes, for Firefox 3.0.*
  • Widerbug 1.0.5
    Released on Jan. 19, 2008
    Initial release, for Firefox 2.*

Download

Install Widerbug
(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, just to be safe.)

Widerbug: Widescreen Firebug

105 thoughts on “Widerbug: Widescreen Firebug

  1. 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.

    Like

  2. 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 :-)

    Like

  3. Dave says:

    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.

    Like

  4. Dave says:


    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

    Like

  5. Jeffrey says:

    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..

    Like

  6. I’ve been thinking about a FF3 version, but perhaps taking a better approach than trying to play catch-up every time they update Firebug. My idea is to make Wirebug for FF3 a modifier plugin that tweaks your existing Firebug install. I’ll take a shot at it when Firebug 1.2 goes final in the next week or two. Thanks, all, for your interest!

    Like

  7. Mad Danny says:

    This is a pretty fantastic change to Firebug, so just a couple of suggestions for taking the idea further:

    sidebar settings:
    – being able to switch which side it appears on (as I find for many sidebar extensions not integrated with AIOS they always appear on the opposite side and it’s more intuitive being able to display firebug on the same side as AIOS)
    – would there actually be a way to have it work with AIOS so as to restore the firebug function of toggling docked firebug on and off? (or add it as a button as it seems the only toggle button available for toolbars and the like is ‘open firebug in new window’)

    layout settings:
    – being able to select vertical panes when docked
    – being able to switch pane display (a previous comment suggested CSS above code, but I prefer the other way around – being able to switch docked panels could be a handy feature with both horizontal and vertical panes

    Like

  8. @Corey: I will, as soon as I figure out how to make the necessary changes as simple as a preference. Currently, I have to move a XUL element around within the Firefox chrome, and I’m honestly not sure how to accomplish that with a simple setting… at least not yet :-)

    Like

  9. Frank says:

    That’s awesome. I tend to just pop Firebug out into its own separate window, and the fact that it doesn’t refresh when changing tabs is always messing me up. This is perfect.

    Is there any way to have it dock on the left side? That’s usually where I keep mine (matter of preference).

    Like

  10. Paul Huband says:

    How do you Redock firebug?????

    When I initially installed it I did something that pops firebug up in separate window. I want to change it back to docked but nothing I try seems to work.

    Help please.

    Like

  11. Pawel says:

    Sick man, just what I was looking for to fully utilize my screen! Big request: can you make it so that the Style/Layout/DOM panel is on the bottom instead of on the right? Right now it’s a little too thin.

    Great work!

    Like

  12. Hey, again thanks for working on this. Still having trouble with it, though. The installation fails saying the package is invalid. Also, perhaps related, the auto-upgrade through Firefox installs plain Firebug when attempting to upgrade Widerbug. Thanks.

    Like

  13. @Nicholas: That’s odd, I’ve had a few people test it since I fixed the 403, both as a standard install and as an “overwrite Firebug” style install, and everything went as it should. Just for kicks, try uninstalling Firebug, restarting Firefox, then installing again. I hope that helps!

    Like

  14. Seth says:

    How about an update for 1.3.3, or at least a modded version that doesn’t think the firebug update to 1.3.3 is the correct upgrade?

    Like

  15. […] Widerbug is a tweaked version of Firebug that has been specifically designed for widescreen monitors. Instead of dividing the computer screen vertically it divides it horizontally by displaying the Firebug information in a sidebar on the right side of the web browser. This is good news for web developers who use widescreen monitors to work on their web development projects. […]

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s