JavaScript

Консоль JavaScript: определение, как вывести, команды и итог

Lorem ipsum dolor

При помощи 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 более специфические:

  1. Команда «console.trace». Это специализированная команда, которая выведет результат трассировки стека и покажет, что происходит в программе в конкретное время и в конкретном месте. Обычно этой командой в консоль выводят сообщения, которые помогают контролировать исполнение «внутренних» механизмов программы.

  2. Команда «console.time». При помощи этой команды можно измерить время исполнения конкретных операций в коде. Например, если операция исполнилась в указанное время, тогда вывести об этом сообщение. Это полезно, так как каждому веб-разработчику необходимо заботиться о производительности собственной программы. 

Заключение

Сегодня мы рассказали, что вывод какого-либо сообщения в JS-консоль может быть разным. Функция «console.log()"» отвечает за вывод информации в консоль. Если ею правильно манипулировать, тогда и сообщения в консоли будут разными.

Схожие статьи

Промис: что это такое, способы использования, промис JavaScript
JavaScript

Промис: что это такое, способы использования, промис JavaScript

Vue JS: функции, события и жизненный цикл. Базовая терминология
JavaScript

Vue JS: функции, события и жизненный цикл. Базовая терминология

JSX. Что это за расширение, где и для чего оно используется
JavaScript

JSX. Что это за расширение, где и для чего оно используется

Учебный курс по React, часть 10: практикум по работе со свойствами компонентов и стилизации
JavaScript

Учебный курс по React, часть 10: практикум по работе со свойствами компонентов и стилизации

×