Методы консоли в JavaScript

Консоль браузера - это инструмент значительно облегчающий работу, отладку и поиск ошибок в языке JavaScript. В самом же JS специально для работы с консолью есть объект console.

Любой новичок изучающий JavaScript знает метод console.log(). А знаете ли Вы, что для консоли в JavaScript есть целая группа методов для объекта console, а не только метод console.log?

Ниже описаны доступные для объекта Console методы и приведены несколько примеров их использования.

Методы Console

Самый простой и самый распространённый способ для вывода чего-либо в консоль в JS - это вызов метода

console.log('Выводим что-либо')

В методы для консоли можно передавать неограниченное число аргументов, разделённых запятыми:

console.log('Ещё вариант', 'простого сообщения', 1, 2, 3, 4);

В результате в консоли все эти аргументы будут объеденены в одну строку через пробелы:

Ещё вариант простого сообщения 1 2 3 4

Так же в console.log можно использовать маркер строковой интерполяции %s, их ещё называют подстановочные символы (маски).

Первым аргументом идёт сообщение с символами, которое будет выведено в консоли, а все остальные аргументы (второй, третьий и т.д.) - будут заменять маркеры %s в соответствующем порядке (второй аргумент заменит первый маркер, третьий аргумент - второй маркер и т.д.).

Пример:

let man = 17;
let woman = 21;

console.log('Мужчин - %s, а женщин - %s', man, woman);  // → Мужчин - 17, а женщин - 21

console.dir() - вывод элемента в консоль в виде объекта

console.log выводит DOM-элементы в консоль как HTML. Чтобы вывести DOM-элемент в консоль в виде объекта используем метод dir()

Синтаксис:

console.dir(elem);

Форматированные сообщения консоли

При выводе в консоль эти методы имеют визуальное оформление, но в каждом браузере это реализовано немного по разному.

console.info()

Выводит информационное сообщение. Для форматирования можно использовать подстановочные символы (маски) с дополнительными параметрами.

console.warn()

Выводит предупреждающее сообщение. Для форматирования можно использовать подстановочные символы (маски) с дополнительными параметрами.

console.error()

Выводит сообщение об ошибке. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.

Пример:

console.info('Информационное сообщение');
console.warn('Предупреждение о чём-либо');
console.error('Какая-то ошибка');

В консоли браузера Google Crome эти сообщения будут выглядеть так:

А вот так это же выглядит в браузере Mozilla Firefox, где видно что в мазиле для info есть иконка:

console.time()

Метод time() для объекта консоли, выводит время выполняемого фрагмента кода.

Особенностью этого метода является то, что обязательно в конце фрагмента кода для которого измеряем время выполнения должен быть вызов timeEnd(), а аргументом и для time, и для timeEnd должно быть передано название измеряющего таймера. Так определяется начало и конец куска кода для которого установлен таймер замера.

console.time('Название счётчика');
// здесь идёт код для которого измеряем время выполнения
console.timeEnd('Название счётчика');

Пример:

console.time('Таймер 1');
for (let i = 0; i <= 100000; i++) {
    let a = i / i;
}
console.timeEnd('Таймер 1');  // → Таймер 1: 13.999755859375ms

Таймеров может быть установлено неограниченное количество, главное не забывать в конце фрагмента кода ставить console.timeEnd('Name')

console.group()

Создает новую группу сообщений в веб-консоли. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный уровень отступа, до тех пор пока не будет вызван метод console.groupEnd().

Пример - чтобы было понятнее, я пробелами и табами разделю на группы:

console.group('Группа 1');

	console.group('Группа 2');
		console.log('Сообщение 1');
		console.log('Сообщение 2');
		console.log('Сообщение 3');
	console.groupEnd();

	console.group('Группа 3');
		console.log('Сообщение 1');
		console.log('Сообщение 2');
		console.log('Сообщение 3');
	console.groupEnd();

console.groupEnd();

Теперь в консоли можно сворачивать сообщения согласно их групп. При этом поддерживается вложенность:

console.table()

Метод console.table() позволяет вывести данные в консоль в виде таблицы. Эта возможность не является стандартной и стандартизировать её пока никто не собирается. И хоть метод не стандартизированный, он поддерживается в браузерах Crome, Firefox и многих других.

Имеет следующий синтаксис:

console.table(data [, columns]);

При выводе данных в консоль в виде таблицы, у таблицы всегда будет первым столбиком индексовая колонка.

Как пример использования метода console.table();, выведу две таблицы в консоль.

• Первая - выводит квадрат числа из генерируемого через цикл for массива.
• Вторая - выводит в отдельных колонках имя и фамилию известных героев из Чапаева.

let kv = [];
for (let i = 0; i < 5; i++) {
    kv.push(i * i);
}
console.table(kv);


function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

let vasya = new Person("Василий", "Иванович");
let petka = new Person("Петька", "Семёнович");
let anka = new Person("Анька", "Пулемётчица");

console.table([vasya, petka, anka]);

В консоли мы увидим такую картину:

При этом если кликнуть на название колонки, то будет выполнена сортировка элементов.