Firebug bundle for TextMate

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.

Screenshot of first menu
Screenshot of second menu
Screenshot of workspace
Screenshot of documentation

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.

Features

Keystrokes

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.

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

Debug with Firebug (Command + D, 9 in javascript; Command + D, 1 in HTML) will check to see if Firefox is running. If so, it switches focus to the browser, refreshes the current window, and then launches Firebug (if needed).

Profile with Firebug

Profile with Firebug (Command + D, 0 in javascript; Command + D, 2 in HTML) does the same, but it invokes the Firebug profiler, then refreshes the current window. After a short delay, it returns the captured events.

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.

Installation

  1. Download Firebug.tmbundle.dmg.
  2. Mount the disk image.
  3. Double click on Firebug.tmbundle. TextMate should launch, and the installation is complete.

Troubleshooting

If you are selecting Debug with Firebug or Profile with Firebug and nothing happens, one of two things is wrong:

  1. Firefox is not running. Open Firefox and the page in need of debugging.
  2. 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:

  1. In TextMate, open the Bundle Editor (defaut: Control + Option + Command + B) and select the Firebug bundle.
  2. Click on “Profile with Firebug”.
  3. Find the value “delay 2”.
  4. 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.


Firebug.tmbundle
Firebug.tmbundle.dmg

del.icio.us:Firebug bundle for TextMatedigg:Firebug bundle for TextMate

7 Comments

  1. Scott Whittaker
    February 12, 2008
    6:21 pm
     

    Hi Richard, great idea! Unfortunately Debug/Profile don’t seem to work for me – it does switch to Firefox but doesn’t seem to reload the current page.

    Actually what I am really after is the ability to replace the hyperlinks in the javascript error mesages to edit the file in TextMate rather than just showing it in the console. The format for the TextMate urls is known, but how to substitute them in Firebug is not.

    Firefox 2.0.0.12 and TextMate 1.5.6 on Leopard.

  2. Scott Whittaker
    February 12, 2008
    6:24 pm
     

    Oops – my mistake. I forgot to turn on assistive devices – works like a charm, thanks!

  3. Yëco
    April 28, 2008
    10:18 am
     

    awesome!!!, thank you so much.

  4. Patrick Barnes
    June 7, 2008
    10:34 am
     

    Thank you for this excellent bundle. I’m hoping you would be willing to add support for opening the current document in Firefox if it is currently running. The HTML bundle *still* does not work for Firefox, which is a major headache. I would love to be able to work on an HTML file in Textmate and then use your bundle with the optional command to open the HTML file I’m working on and *then* doing debug/profiling.

  5. alex
    June 20, 2008
    3:39 pm
     

    yo, you should get this shiz in the repository so we can download it from within textmate with GetBundle… that’d be sweeeet

  6. seyDoggy
    June 23, 2009
    10:41 am
     

    I agree with Alex, this ought to be in one of the bundle repos so we can svn it and keep it updated. tnx for this, you rock!

  7. JJ
    July 15, 2009
    10:46 am
     

    It wants to work for me, but instead of opening Firebug it opens my Delicious plug-in and tries to bookmark the page…

One Trackback/Pingback

  1. [...] doctyper.com. Postet som: Web, kode | Få høre hva du [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*