Inter-Net.PRO

console.log   Консоль браузера - это инструмент значительно облегчающий работу, отладку и поиск ошибок в языке 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.info()

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

console.warn()

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

console.error()

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

 

Пример:

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

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

Консоль браузера Google Crome

 

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

консоль браузера Mozilla Firefox

 


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.group

 


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]);

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

console.table

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


 

  Может быть интересно: Как включить тёмную тему в консоли

 

Авторизация

Войти через соцсети: