Debug javascript without alerts through the Firebug console

Categories:

Debug javascript without alerts through the Firebug console

February 14, 2010

If you are a javascript developer at all, most likely you have had to debug your code with an alert box. This can be horribly annoying when trying to detect line numbers or when working with periodical functions. This is where the Firebug console can be super handy

I have taken my information for this post from David Walsh’s blog (because it is a great ref for mootools, and because his posts are always helpful).

Getting Started

First off, you are gonna need firefox and a little plugin called firebug. I personally enjoy the web developer toolbar for firefox as well. Now you should have these up and running.

To start out, you will need to open firebug by clicking on the little bug icon at the bottom right corner of firefox.

Now click the arrow next to “console” and click “enable”. You can enable different features of firebug for different domains.

Lastly, go to your site where you have written some javascript.

Hello World meet Hello Console

Now, it’s time to write some basic debug javascript. A list of console commands can be found on David Walsh’s blog, here:

http://davidwalsh.name/firebug-console-log

here is a basic “hello world” type of example of the firebug console:

Code

console.log('hello console');

now refresh your page to run that javascript, and say hello to firebug console. Now close your console and refresh the page again, or try to run the page in IE. You get a javascript error, and your browser throws a temper tantrum. Next, I will show you a little fix for this. I want to make a major note that I do NOT condone leaving debug code in your javascript, but the next section will allow you to sniff for firebug and for the console.

Sniff out firebug and it’s console friend

As stated on Walsh’s blog, some site get bogged down under firebug because of many ajax requests. Or you might want to just run your site on IE real quick without removing your debug console code. Well, Walsh comes to the rescue again with some awesome snippets found here:

http://davidwalsh.name/how-to-sniff-firebug-disable

Code

if (! ('console' in window) || !('firebug' in console)) {
 var names = ['log', 'debug', 'info', 'warn', 'error', 'assert', 'dir', 'dirxml',
'group', 'groupEnd', 'time', 'timeEnd', 'count', 'trace', 'profile', 'profileEnd'];
 window.console = {};
 for (var i = 0; i < names.length; ++i) window.console[names[i]] = function() {};
}