Web Design. E-commerce. Content Management. Internet Applications. SEO. SEM. Blogs.

Javascript Debugging with Firebug's Console

Jun23

For as long as I've been developing in JavaScript, my debugging mainly consisted of alert()'s, [[HTMLParagraphElement]].innerHTML's, and [[HTMLInputElement]].value's... that's until Firebug's (Firefox extension) Console implementation came along. Even thought I've been a heavy user for a while now, I'm still discovering more features and tools to help me along my way. If you're a developer and don't have Firebug, you need to get it and if you have it but don't use the console, you need to start using it! Bottom line, if Google Chrome and IE8 have similar implementations, you know it's good. Let's have a look at the basics of utilising the console logging.

Open up Firebug and select the Console tab.

At the bottom of the console, enter console.log("Hello World")

Firebug 01

Hey! You get "Hello World" as the output.

Let's try something a little different... enter console.log("My output text is %s" , "Hello World")

Now try this:

var a = 1, b = 2, c = a + b;
console.log(a, b, c);

Firebug 03

You can also output messages with different return styles. Useful in try-catch blocks and exception handing.

console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");

Firebug 04b