Basics Browser Console Object API

Browser console API

This article will be focused in the console object API available in Google Chrome, Mozilla Firefox, and later versions of Internet Explorer browser. We are going to cover few of them in this article, for a full list of available commands go to the References section at the bottom of this article .

The Console object is available in two places: the code and the browser’s JavaScript Console.
You probably already know of console.log in my opinion this is the most used command of the console object.

  • console.log

    – For basic logging, Use this to print in the browser’s console general string messages about actions taking place within the code, also you can print Objects, Arrays, etc..
    e.g:

    console.log("simple text"); //simple text
    
    var str = 'World';
    console.log("Hello", str); //Hello World
    
    var arr = ['val1','val2','val3','val4'];
    console.log(arr); //["val1", "val2", "val3", "val4"]
    
    var userName = 'jomendez'
    console.log("Authenticating user '%s'", userName); //Authenticating user jomendez
    

 

  • console.error

    – For logging errors in your code. I use console.error within error callbacks on AJAX requests and anywhere else an error might be thrown like a try{}…catch{}. While similar to console.log, this method also includes a stack trace where the error was thrown.
    javascript browser console error

 

     

    book

    Book Tip

    Speaking JavaScript: An In-Depth Guide for Programmers
    Like it or not, JavaScript is everywhere these days—from browser to server to mobile—and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position.

    Amazon

     

  • console.dir(object)

    – When you log a DOM element to the console it displays in an HTML format. To display the JavaScript representation you may  use the dir() method
    browser console dir

  • console.group(title)

    – This command is used to create a group of console logging commands it accepts an optional title parameter. To end the grouping just call grouEnd() see below.

    var userName = "jomendez", authenticated = false;
    console.group("Authentication phase");
    console.log("Authenticating user '%s'", userName);
    // place your authentication code here...
    if (!authenticated) {
      console.log("User '%s' is not authenticated.", userName)
    }
    console.groupEnd();
    

    browser console group

 

  • console.groupCollapsed()

    – Exactly the same as the above method, except for the fact the initial group is collapsed and not opened.

 

  • console.groupEnd()

    – This allows you to end the group defined above.

 

  • console.time(label)

    – The console.time() help you to measuring how long a portion of code can take to be excecuted, you must pass a string to the method to identify the time marker. When you want to end the measurement call console.timeEnd() and pass it the same string passed to the initializer. The console logs the label and time elapsed when the console.timeEnd() method fires.

    console.time("Measure Array");
        var array= new Array(1000000);
        for (var i = array.length - 1; i >= 0; i--) {
            array[i] = new Object();
        };
    console.timeEnd("Measure Array");
    

    Result:
    Measure Array: 1923.457ms

 

  • console.timeEnd(label)

    –This allows you to stop the timer logging function and the elapsed time will be printed out,  see the code above.

 

  • console.table()

    – You can use console.table() to View structured data. With this you can view arrays objects, etc.

    function Person(firstName, lastName, age) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.age = age;
    }
    
    var family = {};
    family.mother = new Person("Susan", "Doyle", 32);
    family.father = new Person("John", "Doyle", 33);
    family.daughter = new Person("Lily", "Doyle", 5);
    family.son = new Person("Mike", "Doyle", 8);
    
    console.table(family);
    

    browser console table

 

  •  console.clear()

    – You can use the console.clear() command to clear the browser console.

 

References:

You can find a full list for the console api for the most popular browsers, NodeJs and Firebug:
Chrome: http://developers.google.com/chrome-developer-tools/docs/console-api/
Firebug: http://getfirebug.com/wiki/index.php/Console_API
Firefox: http://developer.mozilla.org/en-US/docs/Web/API/console
Internet Explorer: http://msdn.microsoft.com/en-us/library/ie/hh772183.aspx
Node.js: https://nodejs.org/api/console.html
Safari: http://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/ Safari_Developer_Guide/Console/Console.html

Notes:

There is bug in Internet Explorer 9 where the console object is only defined if the developer tools were open at least once. That means that you get a Reference Error if you refer to console and the developer tools weren’t open before. As a work around, you can check if the console object exists before you call it.