Firefox extension debugging
Posted: July 23rd, 2008 | Author: Tim | Filed under: coding, ideas | Tags: console, console.log, debugging, Extension, firebug, Firefox, Firefox Extension, javascript, sxsw | 7 Comments »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! 
Edit (2008-08-21: Added link for SXSW voting panel)
[...] idea! If you combine the idea shown here, with my previous post about debugging Firefox extensions, you can see how to prevent extension debugging from getting in the way of your users. if(!Firebug [...]
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?
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!
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/02/21/debugging-firefox-extension-using-log-file/
Trackback for this article…
[...] down further you’ll discover the link to many sites that many of us feel you should really have a look at [...]…
2011…
Definitely believe that which you said. Your favorite reason seemed to be on the internet the easiest thing to be aware of. I say to you, I definitely get irked while people consider worries that they plainly don’t know about. You managed to hit the n…
Online Article……
[...]The information mentioned in the article are some of the best available [...]……