1. console.assert(expression, message)
  2. console.clear()
  3. console.count()
  4. console.dir() and console.dirxml()
  5. console.error()
  6. console.group()
  7. console.info()
  8. console.log()
  9. console.table()
  10. console.trace()
  11. Conclusion

The console object gives you access to the browser’s console. It lets you output strings, arrays, and objects that help debug your code. The console is part of the window object, and is supplied by the Browser Object Model (BOM). I used scirpt.js files to presents some of behavior of console object:

window.onload = function() {
    $.ajax({
        url: 'https://reqres.in/api/users',
        type: 'GET',
        success: function(response) {
            console.log(response);
        }
    });
};

Output:

{page: 1, per_page: 3, total: 12, total_pages: 4, data: Array(3)}
data
:
(3) [{…}, {…}, {…}]
page: 1
per_page: 3
total: 12
total_pages: 4
__proto__: Object

console.assert(expression, message)

The purpose of the console.assert() function is ti test an expression is true or not. The console.assert() function is taking two parameters:

  • Assertion - this is an boolean expression. If assertion is true nothing happens on the console. If assertion is false, the error is thrown on the console.
  • ErrorMessage - the error message which is shown in the error state on the console. (error styled)
window.onload = function() {
    $.ajax({
        url: 'https://reqres.in/api/users',
        type: 'GET',
        success: function(response) {
            console.assert(response.per_page === 4, '[Error]: Item numbers per page is not true!');
        }
    });
};

Below is an example of error message that is thrown in console:

Assertion failed: [Error]: Item numbers per page is not true!

console.clear()

The purpose of this function is to clear the console. Burt why do you need to clear the console? Sometimes other libraries or frameworks can log many things on your console. For example, this code should display many logs in console:

window.onload = function() {
    console.log('Console Log 1');
    console.log('Console Log 2');
    console.log('Console Log 3');
    console.log('Console Log 4');
    console.log('Console Log 5');
    console.log('Console Log 6');
};

Output:

Console Log 1
Console Log 2
Console Log 3
Console Log 4
Console Log 5
Console Log 6

The only thing that we can do it is to add:

console.clear();

to the end of our code. This should clear console from the every logs. To clear console editor we can use: CTRL + L.

console.count(label)

Writes the number of times that count() has been invoked at the same line and with the same label.

window.onload = function() {
    var label = 'Function is called.';
    console.count(label);

    function foo() {
        console.count(label);
    }
}

Output:

Function is called.: 1

After changing number of call of a function:

window.onload = function() {
    var label = 'Function is called.';

    function foo() {
        console.count(label);
    }

    foo();
    foo();
    foo();
    foo();
}

Output:

Function is called.: 1
Function is called.: 2
Function is called.: 3
Function is called.: 4

console.dir() and console.dirxml()

To show an HTML node as a JavaScript object instead of a XML representation we can use the console.dir() function. Basically console.dir(object) is displaying JavaScript representation. This is the main purpose of this function.

console.dirxml(object) this function is displaying the object in XML representation with all descendants. For example console.log() and console.dirxml() are identical. This two functions shows the same results.

console.error()

The console.error() method writes an error message to the console. Example of use:

error: function(errorResponse) {
  console.error(errorResponse.statusText);
}

console.group()

Group functions are mainly making a group for other console functions with a title to create a block for debugging more clearly. This function allows to group objects into small blocks.

console.group('User');
console.log(users[i].id);
console.log(users[i].first_name);
console.log(users[i].last_name);
console.log(users[i].avatar);
console.groupEnd();

Output:

User
  1
 George
 Bluth
 https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg
User
 2
 Janet
 Weaver
 https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg
User
 3
 Emma
 Wong
 https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg
User
 4
 Eve
 Holt
 https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg
User
 5
 Charles
 Morris
 https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg

console.info()

console.info() behave similar to console.log() function but also shows an i icon, an information icon next to the message and then shows the message.

console.info('This is console.info()');

console.log()

It’s one of the most commonly used JavaScript function all over the world. This function displays message to the console.

console.log('This is console.log()');

console.table()

This function displays arrays of object as a table.

Code:

$.ajax({
       url: 'https://reqres.in/api/users?per_page=10',
       type: 'GET',
       success: function(response) {
           var users = response.data;
           console.table(users);
       }

console.trace()

This function displays a stack trace from the point where the method was called.

window.onload = function() {
    function firstFunction() {
        secondFunction();
    }

    function secondFunction() {
        thirdFuncton();
    }

    function thirdFuncton() {
        console.trace('test trace stack');
    }

    firstFunction();
};

Output:

test trace stack
thirdFuncton @ script.js:11
secondFunction @ script.js:7
firstFunction @ script.js:3
window.onload @ script.js:14
load (async)
(anonymous) @ script.js:1

Conclusion

This is a deeper look into console object and some of the other methods. These methods are great tools to have available when we need to debug code.

There are a couple of methods that I have not talked about as their API is still changing. You can read more about them or the console in general here and here.

Reference:

  1. cdnjs.com
  2. Console.clear()

My site is free of ads and trackers. Was this post helpful to you? Why not BuyMeACoffee