Console.Log : Say Goodbye to JavaScript Alerts for Debugging!

Admit it, you’ve done it. You have a bug somewhere in your web page and you add an alert to popup a useful message like “I am in the if statement” or “varName=Bob” to help you figure out what is wrong with your code. In IE9 we have an alternative: the Console object.

ASP.NET programmers who work in Visual Studio may already be familiar with the debug object. You call methods of the debug class in your .NET code to display messages in the Output window to help you debug your code in Visual Studio. The Console object is the IE9 equivalent.

Hopefully you have already discovered the Developer tools in IE8 and IE9. If not, just open your browser and go to a website, any website will do. Now hit F12. This will bring up the developer tool window. Now go to the Console tab.

Now try typing console.log(“Hello world”) in the console command line at the bottom of the window. Your output should look something like this.

console.log will display the parameter passed to the log method in the console window. Use this method to display a string or variable in the console window.

You can use the console class in your code as well, much like we can use JavaScript alerts.

<script type = "text/javascript">
    function tryConsole() {
        console.log("hello world");
    }
</script>

Keep in mind you will not be able to see the output unless you have the developer tools open. You can see the console output on either the Console or Script tabs. Be careful when using console for debugging. If you leave a call to the console object in your code when you move to production and you do not have the developer tools displayed you will get an error message telling you console is undefined. You will get the same error in Visual Studio if you Start without debugging.

To avoid the error message, you either need to remove all the console method calls from your code, or you need to add a check to make sure console exists before calling any methods. For example:

<script type = "text/javascript">
    function tryConsole() {
        if (typeof console != "undefined") {
            console.log("hello world");
        }
    }
</script>

Now that you understand the the basics, let’s look at the different methods available with the console class.

log(message[,object]) – the Log method accepts one or more parameters and displays them in the output window. It also accepts format strings.

warn(message[,object]) – accepts one or more parameters and format strings just like the log method, but displays the output with a warning icon.

info(message[,object]) – will display an information icon beside the output

error(message[,object]) – will display an error icon beside the output

clear() – will clear the console output window

dir(object) –is an object inspection method that will list all the properties of an object

assert(expression, message[,object]) - will display the message or object contents if the expression is false

var debugging=false;
console.assert(debugging,"You are not debugging");

So there you have it, more tools to help you debug your web pages. No add-ons or extra software required. Just download IE9 and try it for yourself!

Since we are already playing around in the developer tools that brings me to today’s My 5

My 5 Cool Features in the F12 Developer Tools (in no particular order)

1. Select element by click – Ever had trouble tracking down the HTML code for a particular element on your page. Select Find | Element by Click from the developer tools menu and then you can just click the element on the web page. The corresponding code in your HTML will be highlighted.
2. Format JavaScript – It’s all about performance, we compress our JavaScript to reduce the number of bytes that are sent across the network, but then the code becomes almost unreadable to the human eye. Select the Script Tab, choose the Toolbox drop down (the little picture of the hammer and wrench) then select Format JavaScript. Bingo now your JavaScript is readable again!
3. Browser mode - Developing for IE9 but want to know what your website will look like in IE8 or IE7? Just set the Browser Mode in the menu.
4. Resize – How does your website appear on a smart phone? how about a tablet or slate? Choose Tools | Resize and then select a size or enter a custom size to ensure your website is user friendly on smaller devices.
5. Change User Agent String – Debugging a web site that doesn’t seem to work in IE9? Could it be the programmer has written their code to use browser detection instead of feature detection so perhaps the code doesn’t know to check for IE9? You can change the user agent string and see if it works when the code thinks it is being displayed in another browser. Choose Tools | Change user agent string and select the desired value.

Comments

• Anonymous
  May 26, 2011
  Congratulations on finally having a console object.  Finally, we won't need a check for: if (window.console && window.console.log){window.console.log(msg);} Though I suspect any serious web developer will already be using FireFox with FireBug and all its plugins. Any word on when IE9's F12 Developer tools will have a "Net" panel similar to the Firebug offering?

• Anonymous
  May 26, 2011
  Hi Vince, Yes, they added it with IE9. Check out the new Network Tab/Panel in the F12 developer tools.

• Anonymous
  January 02, 2012
  Still going to use alert()... Much faster and easier.

• Anonymous
  January 03, 2012
  To me programming is all about having choices! If you prefer alert() go for it, but now you have another alternative

• Anonymous
  April 12, 2012
  It's much easier to just check for and declare console and console.log for unsupported clients. if ( typeof(console) === "undefined" ) {  console = {};  console.log = function() {}; } No modifications to the rest of your code or special (read: annoying) uses of console.log and it will prevent the errors from happening.

• Anonymous
  May 06, 2012
  wauuuuwww, IE9 is fantastic, its unbeliveable, now we are even able to find errors with IE

• Anonymous
  August 01, 2012
  But this is not only for ie9 as you present this

• Anonymous
  April 29, 2013
  check this out, i wrote it few months ago  github.com/.../ConsoleJS

• Anonymous
  May 26, 2013
  Our http://jslogger.com can take care of the frontend errors. It supports the most popular browsers and mobile devices. You can track exceptions from the backend with the JSLogger NodeJS library. Worth to give it a try.

• Anonymous
  July 26, 2013
  <script>alert('thank you');</script>

• Anonymous
  December 13, 2013
  FYI, you have to perform the check for its existence first in IE, unlike all its competitors.  It's also possible to output the object for viewing in the console using the 'log' function in those other browsers, making 'dir' unnecessary.

• Anonymous
  February 19, 2014
  The comment has been removed

• Anonymous
  March 11, 2014
  One minor thing I ran into: // Works like you'd expect console.log(1,2,3) // Will only print 1 console.debug(1,2,3)

• Anonymous
  April 21, 2014
  The comment has been removed

• Anonymous
  January 08, 2016
  Thanks a lot ! You are great