Tim on July 23rd, 2008

One hugely important thing in coding is debugging. Unfortunately, a lot of Javascript debugging gets done via alert() calls. This gets awkward quickly, with the alerts affecting timing, and just being annoying if you have to dump large amounts of data out.

Firebug is a great development tool, and has a really handy logging interface that you can dump debugging info to. Just calling console.log(whatever) will dump it to the main Firebug interface as text that you can copy/paste, scroll through, etc.

If you’re developing a Firefox extension, this debugging capability is really useful. Except, calling console.log() doesn’t work, console isn’t defined for the browser, only for each window.

The trick? Call it directly from the Firebug extension object.

Firebug.Console.log()

Be sure to capitalize both Firebug and Console, and you’ll be good to go. In addition to having great capabilities for logging, the console will prevent your debugging messages from popping up to your users, in case you leave some code where it shouldn’t be.

By the way — if you found this helpful, check back here in a few days. I’ve submitted a presentation proposal to SXSW for Firefox extension development, where I’ve got tons of info for creating extensions for web applications. They collect votes from the community, and I’d like your support. Plus, if the presentation goes through, I’ll be collecting lots of my best tips and putting them online as a resource for the attendees. That means you’ll get all of them too, and you don’t have to go anywhere! :D

Edit (2008-08-21: Added link for SXSW voting panel)

6 Responses to “Firefox extension debugging”

  1. not working for me from within a firefox extension;

    alert(Firebug) does nothing (no alert), alert(window.Firebug) comes back “undefined”…

    have they changed the ID of firebug?

  2. Not sure if they’ve changed it. I haven’t had to look through it in a while. You can open up the Firebug plugin yourself and see what the object is named. Just download the XPI and rename it to a ZIP file. Then you can open it and go through it like any other code. Just another reason why the Mozilla extensions are awesome! :)

  3. Thanks for sharing - i was looking for some new ways to help me debug extension.
    I also shared a post about how to use the local file to help debug extensions on a remote machine:
    http://www.amirharel.com/2010/.....-log-file/

Trackbacks/Pingbacks

  1. A Javascript debugging tip for Firebug
  2. Recent URLs tagged Debugging - Urlrecorder
  3. links for 2009-05-25

Leave a Reply

You will be able to edit your comment after submitting.