При помощи JS (JavaScript) можно осуществить вывод в консоль браузера какой-либо информации прямо из программного кода. JavaScript-программисты знакомы с командой, которая отвечает за это действие, — это «console.log()».
По сути, команда «console.log()» в JavaScript помогает отладить JS-код в программе благодаря выводу сообщений. Поэтому понимать, как она работает, необходимо каждому веб-программисту.
Как осуществить JS-вывод в консоль браузера
Шаблон использования команды «console.log()» в JavaScript простой, но может выводить сложные вещи. Шаблон:
console.log(<информация для вывода>);
Например, можно вывести какой-либо текст:
console.log('JavaScript-вывод в консоль');
Но можно вывести и что-то сложное, например, вот такие функции со сложной конструкцией:
const object1 = { id: first, verified: true, objectcolor: 'white'};
const object2 = { id: second, verified: false, objectcolor: 'black'};
Можно вывести всю эту конструкцию в консоль, за исключением того, что находится до знака «=», чтобы в консоли браузера появилось следующее:
{ id: first, verified: true, objectcolor: 'white'};
{ id: second, verified: false, objectcolor: 'black'};
Делается это простым выражением:
console.log({object1, object2});
Табличный вывод в консоль при помощи JavaScript
Чуть выше в примерах «object1» и «object2» представляют сложные объекты. Если выводить их обычным методом, мы показали, что будет в консоли. Когда только два объекта, тогда более менее читабельно. Но если будет 20 или 50 объектов? Наверное, читать будет не очень удобно. Чтобы улучшить читаемостьинформации, можно вывести их в консоль в табличном представлении. Для этого нужна другая команда:
console.table(<выводимая информация>);
В нашем случае команда будет выглядеть так:
console.table({object1, object2});
Тогда результат в консоли браузера будет вот таким:
(index)
id
verified
objectcolor
object1
first
true
"white"
object2
second
false
"black"
Согласитесь, что так уже полегче читать?
Групповой вывод в JS-консоль
Бывают случаи, когда в консоль нужно вывести сгруппированную информацию, которая каким-то образом связана между собой. Тогда в консоли будет отчетливо видно, что и к чему относится и какая связь между сообщениями. Групповой вывод в JS-консоль осуществляется при помощи команды:
console.groupe(<информация для вывода>)
Например, нужно вывести информацию о покупателях интернет-магазина:
console.group("Информация о покупателе");
console.log("Имя: Дормидонт");
console.log("Отчество: Платонович");
//Далее формируем вложенную группу
console.group("Адрес");
console.log(Страна: Тринидад и Тобаго);
console.log(Город:Чагуанас);
console.log(Улица:Черчилль-Рузвельта);
console.groupEnd();
console.groupEnd();
В результате такой организации вывода мы получим вложенный список «информация о покупателе», который можно будет свернуть или развернуть, чтобы увидеть всю информацию о покупателе «Дормидонте Платоновиче».
Вывод предупреждений в JS-консоль
Бывают и такие случаи, когда нужно вывести какое-то сообщение, но его желательно обозначить, чтобы его сразу можно было заметить в окне консоли. Допустим, нужно вывести какое-то предупреждающее сообщение об ошибке. Тогда можно воспользоваться следующими командами:
console.warn(<информация для вывода>);//для предупреждений
console.error(<информация для вывода>);//для ошибок
При употреблении таких команд сообщения будут выводиться в соответствующей стилистике. Например:
сообщения-«предупреждения» будут выделены желтым цветом, а перед ними будет стоять иконка «восклицательный знак в треугольнике»;
сообщения-«ошибки» будут выделены красным цветом, а перед ними будет располагаться иконка «крестик в красном круге».
Для не слишком важной информации можно воспользоваться менее выделенным сообщением в консоли. Перед таким сообщением будет располагаться иконка «буква «i» в синем круге». Такие сообщения выводятся при помощи команды:
console.info(<информация для вывода>);
Если сильно заморочить свое внимание, тогда можно самостоятельно стилизовать выводимые сообщения. Делается это по таким же принципам, как и CSS, однако для стилизации вывода применяется специальная директива «%с». Вот как это выглядит в коде:
console.log('%c Ошибка'),
'color: yellow; background-color: red',
'Возникла непредвиденная ошибка';
В этом случае перед сообщением «Возникла непредвиденная ошибка» будет написано слово «Ошибка» желтым цветом на черном фоне. Таким же образом, помимо цвета, тексту можно придать стиль или размер шрифта.
Отладка JS: полезные команды для консоли
Все команды, что мы привели выше, будут нужны при отладке кода JS. Однако есть еще 2 более специфические:
Команда «console.trace». Это специализированная команда, которая выведет результат трассировки стека и покажет, что происходит в программе в конкретное время и в конкретном месте. Обычно этой командой в консоль выводят сообщения, которые помогают контролировать исполнение «внутренних» механизмов программы.
Команда «console.time». При помощи этой команды можно измерить время исполнения конкретных операций в коде. Например, если операция исполнилась в указанное время, тогда вывести об этом сообщение. Это полезно, так как каждому веб-разработчику необходимо заботиться о производительности собственной программы.
Заключение
Сегодня мы рассказали, что вывод какого-либо сообщения в JS-консоль может быть разным. Функция «console.log()"» отвечает за вывод информации в консоль. Если ею правильно манипулировать, тогда и сообщения в консоли будут разными.

JavaScript