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. […] que la division horizontal es un pelin más incómoda. Hasta hoy. Gracias a anieto2k he descubierto Widerbug, una alternativa de Firebug para pantallas panorámicas, dividiendo la pantalla en modo vertical, y […]

    Like

  2. kazemizuhi says:

    Do you think this could be ported over to Songbird? As it stands, Songbird has no Firebug or Widerbug type of add-on to speak of. Such an addition would quickly become as essential to Songbird development as it is to Firefox’s. They are both built upon XULRunner, so I don’t believe it would be a difficult task to port.

    Like

  3. Hi,

    I love the idea and I’d love to try it out, but it doesn’t seem to be compatible with Firefox 3.1 beta, even though you say it should work with Firefox 3.*.

    I’m not 100% sure, but I think that the * wildcard (assuming you specified this in the install.rdf) might not include beta builds. I’m not sure of the best workaround.

    Thanks!

    Like

  4. Doug says:

    I give up. It’s a great program when it works but FireFox keeps restoring FireBug and I end up with my screen split horizontally instead of side by side. (Yes, I uninstalled FireBug every time I reinstall WiderBug.) It’s just a waste of time to keep uninstalling Firebug and re-installing Widerbug every time I want to use it.

    Like

  5. Nick says:

    I’ve had pretty good luck just ignoring the update dialogue, but I do second the notion. A fix to watch for actual Widerbug updates would be awesome, as would an updated Widerbug. Maybe just write a how-to on your modifications so someone else can pick up the flag? I’d consider it. Thanks.

    Like

  6. Collin, thank you for such a great mod to a wonderful extension! Like many commenters, I was also wishing for a vertical pane setup in wide mode, and recently dug around in the code for a bit to get it working. I think this small tweak really optimizes the screen real estate, especially for those of us doing a lot of work with xhtml/css. Perhaps you could work this into a future update? Alternatively, for those who don’t mind changing node names in an XML file, here are the steps for the modification:

    1. Locate your firefox extensions directory. This is different for Mac/XP/Vista/Linux, so google around if you’re not sure where to look. From there, open this file in a text editor (such as textedit or wordpad): /firebug@software.joehewitt.com/content/firebug/browserOverlay.xul

    2. Locate nodes (hbox id=”fbPanelBox”) and (hbox id=”fbCommandBox”)

    3. Change those node names from ‘hbox’ to ‘vbox’

    4. Restart Firefox and you should have the new wide-vertical setup!

    In light testing on my Mac and in Vista, the setup worked great. Hopefully this will be as helpful for some of you as it is for me.

    Here’s a screenshot of Widerbug vertical, which includes a screenshot of the code modifications. Enjoy!

    Like

  7. Sorry about the long wait folks! I’ve been busy doing lots of iPhone development in my spare time, taking away from Widerbug and other projects.

    Widerbug 1.3.3 is out now, in sync with Firebug 1.3.3, and includes much-requested automatic update capabilities that won’t restore Firebug over top. The updatr points to command-tab.com, so when a new version of Widerbug is released, you’ll be prompted to install it.

    Also, inside the 1.3.3 bundle (rename the .xpi to .zip and unzip it) is my own set of instructions for how to make the modifications — just in case.

    I hope this update is to everyone’s liking!

    Like

  8. Joshua says:

    Hi there

    Very useful plugin, but my screen is not sooooo very wide so I’d like to have the possibility to have to possibility to display left frame of firebug on top and the right frame at the bottom. Would this be possible?

    Thanks a lot
    Josh

    Like

  9. @ Josua: The answer to your question is two comments above yours, #65 : ) With comment #66, Collin updated widerbug to be its own extension with its own update path (awesome), so in step one of my instructions, simply replace the firebug path ‘/firebug@software.joehewitt.com/’ with the new widerbug path ‘/widerbug@command-tab.com/’ and you should be good to go!

    Like

  10. We need the version for FF 3.5!
    I tried the modifications outlined above, but Firebug version 1.4 is a bit different. Next I replaced <box and <hbox to <vbox whre it seemed appropriate, but nothing worked.

    Like

  11. Hi there! it is wonderfull!!! but there’s a little anoying thing.. when you switch tabs, and the target tab has not widerbug opend.. the tabs buttons are re-distributed. is there anyway to do that widerbug stays “inside” the webpage and not “inside” firefox?

    that would be a great improvement!

    ah, btw.. @#65 and #68 thanks! it has been quite usefull :)

    Like

  12. Hello, It’s really a nice improvement on firebug.

    in HTML view there are two columns as you know, since widerbug is thought for big screens. I think it would be nice and more user-friendly to have these columns as two main horizontal rows.

    Anyways thanks for sharing this,
    Sinan.

    Like

  13. Jay says:

    Great extension, and thanks for updating to accommodate 3.5 users.

    The only downside is that the hack from response #65 to get a single vertical pane no longer works because the code has changed. I tried hacking it myself, but was unsuccessful. If anyone smarter can look into it and post a solution, I’d be most appreciative.

    I know the world is full of end users who ask for “just one thing” to make an app perfect, but having a vertical pane really does enhance the usability of Widerbug a great deal, especially on very large displays (24″ and above). Add me to the group who hopes this option makes it into a future release so hacks are no longer necessary.

    Again, great extension. I can’t imagine doing front end work without it.

    Like

  14. Widerbug Vertical Pane Update (for widerbug v1.4):

    Firebug has updated its layout, and as such widerbug’s layout files have also changed. To utilize vertically stacked panes in widerbug, make these modifications (the file, nodes and line numbers have changed since comment #65):

    1. Open /widerbug@command-tab.com/content/firebug/firebugOverlay.xul

    2. Change line 127 from (box id=”fbPanelPane”) to (vbox id=”fbPanelPane”)

    3. Change line 254, the corresponding closing tag, from (/box) to (/vbox)

    4. Restart firefox and enjoy!

    If you have any trouble, make sure you give yourself write permissions for the file (many text editors will allow you to override this on save).

    Like

  15. Michael C. says:

    That’s done the trick – great! :)

    Just One More Thing™… ;) In previous versions of Fire/Widerbug, it would remember its open/closed state on a per-tab basis. Now it seems to be based upon a per-window basis. Is there any way to revert to remembering the per-tab basis?

    I want it to be open on the tab displaying the frontend of the site I’m developing, but there’s no reason whatsoever for it to remain open on the CMS backend.

    Like

  16. kahuna says:

    Hi…
    I want just say tha if i place the WiderBug button on the toolbar, it open Widerbug(firebug) in a new windows just like standard firbug.

    but if i place the Analize button on toolbar and press it it open as Widerbug (on the same windows).
    Thanks for the Addon very good and usefull…

    Like

  17. mofle says:

    Instead of creating another Firebug clone that is eventually not going to be up to speed with the fast development cycle of Firebug. Why don’t you create a plugin for Firebug that does this?

    Like

  18. rinopo says:

    It’s great.
    But is there any way I can easily switch the way the firebug pane shows up (bottom side / right side), without disabling / enabling widerbug and restarting firefox each time…?
    On some pages I miss the good old horizontal layout ;)

    Like

  19. Bill Hutten says:

    Any chance of publishing a version that’s based on Firebug 1.4.3? I’m having some issues with Widerbug 1.4.0.

    Or – if you describe the changes you made for Widerbug, I’d do it myself… :)

    Like

  20. This is great!

    Here’s a wish list to make it perfect, though:
    – an option for firebug to return to the original horizontal position (just in case).
    – an alternative layout option to have the HTML at the top and the style at the bottom or vice versa (beside the current side-by-side layout).

    Like

  21. What would be really nice would be to have a wide split view. I’m on a 13″ Macbook and the wide view would be great if the split view of tabs was hoz instead of vert.

    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