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.
Release History
- 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.*
(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.
Ditto to #69 (Firefox 3.5 update).
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.
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 :)
[...] Link: Widerbug [...]
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.
…. neeed widerbug for 3.5 ….
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.
Indeed, a vertical pane layout option would be greatly appreciated!
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).
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.
[...] http://www.command-tab.com/2008/01/19/widerbug-widescreen-firebug/ ??????????????Firebug??tweak?????????????????? [...]
… have firebug for 3.5. My need is quenched …
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…
bum….
just wrong the last comment….
also firebug do in this way….
:P
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?
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 ;)
Please get the changes merged in upstream or make it an add-on to firebug instead of a complete replacement…
Awesome stuff!
Are there any plans for a 1.5X compatible release? I find 1.5 much much better.
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… :)
[...] Widerbug 1.3.0 (2009-01-08) Collin Allen @command-tab [...]
Great! Thank you so much; I have an unusually wide monitor (for its height) and this is a gem.
Thank you for taking the time to share this with others.
[...] solcher Monitore wird es interessieren zu wissen das es für Firebug eine Erweiterung mit dem Namen Widerbug gibt. Diese Erweiterung optimiert Firebug für solche Breitbildschirme. Widerbug: Firebug für [...]
Any chances to get a 3.6 compatible version soon please? :(
1.5.0 is now out, for Firefox 3.6+ :)
Nice! Thanks a lot! :) You should put a donation button on this page.
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).
Hi Collin:
Wow! Great plugin! I agree with Giraldi: we need a toggle to put it back to the original layout, in case we’re dealing with something wide.
Thx!
- AAA