My two most indispensable web development tools are Firebug and TextMate. I’m sure the same goes for many web developers the world round. Firebug brings with it a complete set of debuggers and problem-solvers that is unrivaled by any other application. And TextMate is the little text editor that could (and does). It’s versatility is unmatched. I constantly find myself shuttling between the two in the eternal edit/debug dance we webbies know all too well.
It seems odd to me that there isn’t (as of yet) anything out there that brings these two fan favorites together. If any two applications are deserving of a mashup, it’s these two. So I said to myself, “Self, why not build your own?”
A few hours later, I had myself a bona-fide Firebug bundle for TextMate.
The bundle automates the console commands found in the Firebug API. They’re all in there, every last one. One of the reasons I built the bundle is because I constantly found myself resorting to console.log for most of my debugging. I knew that Firebug offered many more commands to take advantage of, but I just never had the time to keep looking up commands. Fortunately, this bundle solves that problem. With a simple keystroke, all the console commands are at your disposal.
The default keystrokes are Command + D (D… debug, get it?) and Command + Shift + D. You can change the keystrokes to whatever you wish. Part of the TextMate versatility I was talking about.
I’ve split the commands into two sets, because of the number of console commands in the API, and because I wanted each command to have it’s own shortcut. Each set contains half of the commands organized in order of the documentation.
In case you need a refresher on what a command does or what it outputs, I’ve added the Firebug Console API documentation in the bundle. Selecting it will open the TextMate web preview, with the complete documentation intact.
I also threw in a couple of features to help automate the edit/debug process:
Debug with Firebug
Profile with Firebug
Both of these last two features require that you enable access for assistive devices. This is found under System Preferences > Universal Access > Enable access for assistive devices.
- Download Firebug.tmbundle.dmg.
- Mount the disk image.
- Double click on Firebug.tmbundle. TextMate should launch, and the installation is complete.
If you are selecting Debug with Firebug or Profile with Firebug and nothing happens, one of two things is wrong:
- Firefox is not running. Open Firefox and the page in need of debugging.
- Access to assistive devices is disabled. See above for instruction on enabling access.
If you find that the profiler returns too fast, it is possible to alter the length of time it waits:
- In TextMate, open the Bundle Editor (defaut: Control + Option + Command + B) and select the Firebug bundle.
- Click on â€œProfile with Firebugâ€.
- Find the value â€œdelay 2â€.
- Tweak â€œ2â€ to your liking. I recommend incrementing by 1 until you hit your sweet spot.
Please let me know of any bugs, or if you’d like to suggest an improvement.