Выводим сообщения в консоль браузера или console.log и не только

29.01.2019


Консоль - это один из инструментов отладки который помогает во FrontEnd разработке. Все мы пользуемся console.log(), но часто забываем или не знаем о других методах объекта Console.

Например, произвести очистку консоли можно методом console.clear();

console.log('My log 1'); 
console.clear();
console.log('My log 2'); 

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

скриншот консоли chrome

А для отображения информации можно использовать несколько методов: console.log(), console.error(), console.warn(), console.info(), console.debug().

Обратите внимание, что метод console.debug() начиная с Chromium 58 появляется только в браузерных консолях Chromium, если выбран уровень «Verbose»

Пример использования:

console.log('My log'); 
console.error('My error');
console.warn('My warning');
console.info('My information');
console.debug('My debug'); // Начиная с Chromium 58, этот метод появляется только в браузерных консолях Chromium, если выбран уровень «Verbose».

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

скриншот консоли chrome

Также интересен метод console.table();

const v1 = ['One', 'Two', 'Three'];
console.table(v1); 

const v2 = [[1, 'One', 'str1'], [2, 'Two', 'str1'], [3,'Three', 'str3']];
console.table(v2);

const v3 = [{id: 1, n: 'One', str: 'str1'}, {id: 2, n: 'Two', str: 'str1'}, {id: 3, n: 'Three', str: 'str3'}];
console.table(v3);

const v4 = {
    'first': {id: 1, n: 'One', str: 'str1'},
    'second': {id: 2, n: 'Two', str: 'str1'},
    'third': {id: 3, n: 'Three', str: 'str3'}
};
console.table(v4);

const v5 = {
	first: {
		id: 1, 
		obj: { 
			id: 1, 
			text: 'text1' 
		}, 
		str: 'str1',
	},
	second: {
		id: 1, 
		obj: { 
			id: 1, 
			text: 'text1' 
		}, 
		str: 'str1',
	},  
	third:{
		id: 1, 
		obj: { 
			id: 1, 
			text: 'text1' 
		}, 
		str: 'str1',
	},
};
console.table(v5);

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

скриншот консоли chrome

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

console.assert(false, 'False');
console.assert(true, 'True');

let variable;
variable = true;
console.assert(variable, 'True');
variable = false;
console.assert(variable, 'False');
variable = NaN;
console.assert(variable, 'False');
variable = null;
console.assert(variable, 'False');

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

скриншот консоли chrome

Свойства объекта удобно выводить с помощью console.dir

console.log(document.body);
console.dir(document.body);

const obj = {
	id: 1,
	name: 'MyObject',
	info: 'Object information',
	data: {
		1: 'text 1',
		2: 'text 2',
		3: 'text 3',
	},
};
console.log(obj);
console.dir(obj);

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

скриншот консоли chrome

Если же требуется вывод множества сообщений, но хочется при этом как-то сохранить иерархию, то для этих целей можно воспользоваться методами

console.group(), console.groupCollapsed(), console.groupEnd():

console.log('Information 0');
console.group('Group A');
console.log('Information 1 in Group A');
console.log('Information 2 in Group A');
console.group('Group A.1');
console.log('Information 1 in Group A.1');
console.log('Information 2 in Group A.1');
console.groupEnd('Group A.1');
console.group('Group A.2');
console.log('Information 1 in Group A.2');
console.log('Information 2 in Group A.2');
console.groupEnd('Group A.2');
console.groupEnd('Group A');
console.group('Group B');
console.log('Information 1 in Group B');
console.log('Information 2 in Group B');
console.groupEnd('Group B');
console.log('Information 1');
console.log('Information 2');
console.group('Group C');
console.log('Information 1 in Group C');
console.groupEnd('Group C');
console.groupCollapsed('Group D');
console.log('Information 1 in Group D');
console.log('Information 2 in Group D');
console.groupEnd('Group D');
console.log('Information 3');

Разница между console.group() и console.groupCollapsed() лишь в том, что первый метод выводит группу в развернутом виде, а второй в свернутом.

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

скриншот консоли chrome

А что делать если мы хотим замерить время работы какой либо функции, цикла или просто участка кода? Мы воспользуемся console.time() и console.timeEnd()

console.time('time1');
for(let i=0; i<=10; i++) {
    console.time('time2');
    for(let i=0; i<=1000000; i++) { } 
    console.timeEnd('time2');
}
console.timeEnd('time1');

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

скриншот консоли chrome

На самом деле это не все методы объекта Console, а только те, на которые я обратил внимание. Остальные смотрите на MDN