Saturday, January 19th, 2008 at 4:41 PM
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.
Works with:
- Firefox 3.0.*
Tested on:
- Firefox 3.0.1-3.0.10 Mac
- Firefox 3.0.1-3.0.10 Windows XP
- Firefox 3.0.1-3.0.10 Linux (Ubuntu)
Release History
- 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.*
(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.)
While you’re installing plugins, here are a few of my favorites that I recommend:
- ScreenGrab!
Take instant captures of rendered pages - Web Developer Toolbar
The Swiss Army Knife of web developer tools, second only to Firebug - Duplicate Tab
Open a duplicate tab, history and all
(And for completeness, here is the Photoshop file for the above Install Now button.)
This entry was posted
on Saturday, January 19th, 2008 at 4:41 pm and is filed under NerdLab, Programming.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, trackback from your own site, or 
Stumble it!.
fmTuner: Last.fm for WordPress
ADB Mouse Conversion
iPod Super
Awesome bro! It’s installed and working beautifully on my firefox on my 15″ MBP.
Word to your mutha.
[...] Widerbug: Widescreen Firebug 339 [...]
Super! Thanks!
[...] original hace que se pierda mucho espacio de la ventana del navegador. Collin Allen ha publicado Widerbug, una modificación que permite situar la ventana de Firebug en el lateral derecho del navegador, [...]
[...] and not that keen on Firebug taking up quite a big heap from your (precious) vertical space? Widerbug fixes this by opening Firebug on the side instead at the bottom. Spread the [...]
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.
or…you got the macheist bundle and get all the same functionality with cssedit 2 — but inside an awesome mac interface.
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 :-)
Yo Collin, I plan on loading this up on my ubuntu laptop, I will let you know how it works. :)
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.
Thanks for the heads up, Dave! I’ll amend the post.
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
You are a freak. Nice work.
Widerbug: Widescreen Firebug
a revisited version of firebug…
Very nice.
Is its source available?
I also want to customize my firebug and looking examples how you did it helps a lot.
[...] then, that I sometimes find myself poking around in others’ web application code with Firebug (or Widerbug) and wishing I had jQuery at my immediate disposal to perform manipulations with its succinct [...]
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..
Unfortunately, this extension is not compatible with Firefox 3 and latest firebug releases. Do you plan to update this extension?
Yes, great idea, how about an update for FF3 :)
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!
Great news!Looking forward to a ff v3 release
[...] Widerbug [...]
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
Um… Why not just submit the code as a preference in firebug?
@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 :-)
[...] mismo, la gente de Command-tab se ha currado un Firebug para los que tenemos pantallas grandes o usamos escritorios extendidos. [...]
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).
[...] Widerbug [...]
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.
This rocks. Thanks!
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!
Ill plugin.
Excellent idea, properly implemented. But I’m getting a 403 on the install file for 1.3.0. Help?
Whoops, 403 fixed! Forgot to set proper permissions on the file ;)
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.
@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!
[...] is a great Firefox addon called Widerbug which allows you to dock Firebug to the right of your screen. I know it’s been around for [...]
Noticed that when I updated my Widerbug to 1.3.3, it removed it and went back to firebug. Strange.
Nice..
Thanks alot
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?
[...] #5. Wider Bug – Download [...]
[...] #5. Wider Bug – Download [...]
[...] 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. [...]
It works very well on my Ubuntu Linux, thank you.
[...] try to coax it into wide screen mode. Widerbug is a free extension and works wherever Firefox does. Widerbug [via [...]
[...] try to coax it into wide screen mode. Widerbug is a free extension and works wherever Firefox does. Widerbug [via [...]
[...] Widerbug [via gHacks] Tagged:cssextensionsfirefoxhtmlweb development [...]
That’s awesome. Thanks for the good work.
[...] Widerbug es un versión de Firebug para pantallas panorámicas que nos permite disponer de las ventajas de Firebug en el lateral del navegador. [...]
[...] ?????? – FireBug ????? ???. ?? ???? ?? ??? ?????? ???????? WiderBug – ??????????? FireBug ??? ?????????????? ?????????, [...]
[...] Widerbug Etiquetas: extensiones,firebug,formato ancho,pantalla [...]
[...] Widerbug: Widescreen Firebug (tags: webdesign firefox_extension) [...]
[...] complemento para Firefox que permite ver y deditar código con vista inmediata en el navegador, y Widerbug es… como su extensión. Pero de manera literal, [...]
[...] try to coax it into wide screen mode. Widerbug is a free extension and works wherever Firefox does. Widerbug [via [...]
[...] #5. Wider Bug – Download [...]
[...] 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 [...]
[...] By webdevteam Wem der normale Firebug nicht reicht, der kann auch den Widerbug nehmen. Dieser soll besonders bzw. gerade für Widescreen-Monitore geeignet [...]
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.
[...] Widerbug: Widescreen Firebug | Command-Tab A modification of Firebug which takes advantage of wider screens. (tags: firebug widerbug firefox extensions addons CSS) [...]
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!
Wonderful idea, how did I live without it so far?
[...] Firefox and Firebug in a widescreen monitor, but Firebug panel takes up precious vertical space, Widerbug is the answer. Firebug now moved to the right side of the browser as a [...]
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.
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.
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!
http://files.jonaldinger.com/firebug/widerbug_vertical.jpg
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!
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
@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!
When will it be upgraded to Firefox 3.5? Thanks.