Javascript debugging in IE8 with console

Internet Explorer 8 has taken the javascript development to the next level by providing a rich developer integration with the browser. In this post I will explain one of the core feature that I use often when debugging my web applications containing javascript.

Traditionally one of the best way to debug was using the alert function. But this is quite annoying as we have to press ok all the time. IE8 creators understood this and have created a set of functions to easily allow us to debug.

Instead of using alert, you can use console.clear(), console.log(), console.info(), console.error(), console.warn() to provide better information when debugging.

console.clear();
console.log("hello world from js to ie8 console");
console.info("sample info");
console.error("sample error");
console.warn("sample warning");
var x = "hello";
var y = 10;
var z = 1.1;
console.log("string:%s:int:%i,real:%f", x, y, z);

The parameters for the console functions have the same format as printf function in c. Anyways I have put some examples above to make it easier.

  • %s string
  • %i integer (whole numbers only)
  • %f floating point numbers (decimal values)

I would recommend you to use proper info, error and warn rather than just log as it even allows us to filter as shown below.

If you get to the bottom of you IE on status bar, it is basically the error telling the the console is undefined. In order to solve it, open the IE developer tools (press F12) and refresh the page. This automatically registers the console and you will not get any javascript errors.