Объект console нужен для доступа к средствам отладки браузера. Методы этого объекта позволяют выводить строки, массивы, объекты, существенно облегчая процесс отладки кода. В свою очередь console является частью глобального объекта Window и поддерживается Объектной Моделью Браузера (Browser Object Model, BOM). Методы объекта console работают как на стороне фронтенда, так и на стороне бекенда.

В этой статье мы рассмотрим способы использования этого объекта, которые, как я надеюсь, помогут Вам повысить уровень программирования.

Содержание

Группировка строк консоли

Создавая логи можно использовать уровни вложенности с помощью console.group():

console.group('Message Log');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();
console.group('Error Log');
console.log('Error 1');
console.log('Error 2');
console.groupEnd();

Как Вы заметили, каждая новая группа начинается с console.group() и заканчивается console.groupEnd().

Результат:

Message Log
    Message 1
    Message 2
Error Log
    Error 1
    Error 2

Вывод имен и значений свойств объекта в виде таблицы

Имена и значения свойств объекта становятся более читабельными, если вывести их в таблицу с помощью console.table():

var where = {
    'name': 'prateek sign',
    'mobile': 1234567890,
    'email': 'prateek@gmail.com'
}

// Используем метод .table вместо .log
console.table(where);

Печать лога только “если условие не выполнено”

С помощью console.assert() сообщение выводится только в том случае, когда результатом выражения является “ложь” (false). Если выражение истинно - ничего не происходит:

var isUserExist = getUserInfo();
// ответ может быть true или false

// строка в консоли появляется только, если isUserExist = false
console.assert(isUserExist,'User does not exist')

Время выполнения

С помощью console.time() можно определить время выполнения фрагмента кода:

console.time();
var i = 0;
while (i < 100000000) {
    i++;
    // do nothing
}

console.timeEnd();
// RESULT
// default: 168.152ms

Различные варианты вывода лога

С помощью методов .log, .info, .debug, .warn, .error можно получить различные визуальные варианты вывода лога:

console.debug(‘I m a debug msg’);
console.info(‘I m an info msg’);
console.log(‘I m a normal log msg’);
console.warn(‘I m a warning msg’);
console.error(‘I m an error msg’);

Спасибо за внимание.

Перевод статьи Prateek Singh “5 Ways To Use Console Object”.