Home > JavaScript > Easy Firebug Console Logging

Easy Firebug Console Logging

Like most of the web developers I too develop the pages using Mozilla Firefox with the help of the Firebug extension. After making everything correct in Mozilla Firefox the next step is to test the page(s) in Google Chrome and Apple Safari. As the last step I will start my tests in Internet Explorer.

As far as the JavaScript testing is concerned I extensively uses Firebug’s console APIs in my JavaScript source code.

console.log("This is a test");
console.info("The value of name: " + name);

What I usually miss before starting the Internet Explorer tests is to remove the calls that I’ve made to the Firebug’s console object. IE breaks down its execution without any fail as it does not support a console object until IE7. As you know IE8 supports a console, which is a first attempt from microsoft to make something that we can call a better debugger.

I’ve created a small JavaScript function through which this issue can be avoided. I mean I can log whatever I want in Firebug’s console from my JavaScript as usual but even if miss to remove those calls IE will not break down saying that “Console is not defined”.

function trim(str) {
	return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
function log(obj, consoleMethod) {
	if (window.console && trim(window.console.firebug) !== '') {
		if (typeof consoleMethod === "string" && typeof console[consoleMethod] === "function") {
			console[consoleMethod](obj);
		} else {
			console.log(obj);
		}
	}
}

The function accepts two arguments.

  • The first one is the “item” that you want to log in to Firebug’s console. It can be string, object, rather anything from the JavaScript code.
  • The second one is an optional firebug’s console name in string mode. If there is nothing then the function will use log as the default option.

Typical function calls would be like the following

log("This will be logged");

log("This will be displayed in console as info", "info");

log("This will be displayed in console as error ", "error");

This is a very simple thing through which some head aches can be avoided.

Advertisements
Categories: JavaScript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: