5 полезных советов по использованию console.log()

Использовать console.log(message) очень просто - аргумент message выводится в консоль.

console.log('My message');
// logs "My message"

const myVar = 12;
console.log(myVar);
// logs 12

В этой статье я расскажу вам 5 полезных советов, которые помогут вам повысить свою продуктивность при использовании console.log().

1. Именование выводимых переменных

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

Например, давайте выведем некоторые переменные:

function sum(a, b) {
  console.log(b);
  return a + b;
}

sum(1, 2);
sum(4, 5);

Когда приведенный выше код будет выполнен, вы увидите только выведенные числа:

Чтобы связать между собой выводимую переменную и ее значение, оберните переменную в пару фигурных скобок {b}:

function sum(a, b) {
  console.log({ b });
  return a + b;
}

sum(1, 2);
sum(4, 5);

Теперь, глядя в консоль, вы можете видеть, что именно выводится именно переменная b:

2. Продвинутое форматирование

Самый распространенный способ вывести что-либо в консоль - просто вызвать console.log() с одним аргументом:

console.log('My message');
// logs "My message"

Иногда вам может понадобиться лог, содержащий несколько переменных. К счастью, console.log() может форматировать строку способом sprintf() с использованием спецификаторов, таких как %s, %i и тому подобных.

Например, давайте отформатируем лог, который содержит в себе строку и целое число:

const user = 'john_smith';
const attempts = 5;

console.log('%s failed to login %i times', user, attempts);
// logs "john_smith failed to login 5 times"

%s и %i заменяются значениями user и attempts. Спецификатор %s означает, что нужно преобразовать значение как строку, а %i - как число.

Вот список доступных спецификаторов:

Спецификатор	Значение
%s	Элемент преобразуется в строку
%d или %i	Элемент преобразуется в число
%f	Элемент преобразуется в число с плавающей точкой
%o	Элемент отображается с оптимальным форматированием
%O	Элемент отображается с общим, для объекта JavaScript, форматированием
%c	Применяется при использовании CSS

3. Вывод логов с использованием стилей CSS

Консоль браузера позволяет применять стили к выводимому логу.

Вы можете сделать это, используя спецификатор %c с соответствующими стилями CSS. Например, давайте выведем в консоль лог с увеличенным размером и жирностью шрифта:

console.log('%c Big message', 'font-size: 36px; font-weight: bold');

Спецификатор %c применяет стили CSS font-size: 36px; и font-weight: bold.

Вот как выглядит лог с примененными стилями в консоли Chrome:

4. Интерактивные логи

Стиль логов зависит от реализации консоли. Браузеры, такие как Chrome и Firefox, предлагают интерактивные логи объектов и массивов, а консоль Node выводит логи в виде текста.

Давайте посмотрим, как Chrome выводит простые объекты, массивы и деревья DOM. Вы можете взаимодействовать с этими элементами, разворачивать и сворачивать их.

4.1 Объекты

const myObject = {
  name: 'John Smith',
  profession: 'agent'
};

console.log(myObject);

В консоли Chrome лог myObject выглядит так:

Вы можете развернуть и свернуть список свойств объекта. Также вы можете увидеть прототип объекта (__proto__).

4.2 Массивы

const characters = ['Neo', 'Morpheus', 'John Smith'];

console.log(characters);

Chrome выводит массив символов в консоль следующим образом:

4.3 DOM дерево

Вы можете напрямую взаимодействовать с элементом DOM, который отображается в консоли.

console.log(document.getElementById('root'));

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

4.4 Интерактивные логи внутри сообщений

Спецификатор %o (который отображает значение с оптимальным форматированием) может вставлять массивы, объекты, элементы DOM и обычный текст в текстовое сообщение без потери интерактивности.

Следующий фрагмент кода выводит в консоль сообщение, содержащее объект:

const myObject = {
  name: 'John Smith',
  profession: 'agent'
};

console.log('Neo, be aware of %o', myObject);

В консоли мы видим, что массив myObject не преобразуется в строку, а остается интерактивным.

5. Вывод больших объектов в консоли Node

Логи в Node выводятся в виде простого текста. Однако console.log() в Node не отображает объекты с глубоким уровнем вложенности: объекты на третьем уровне отображаются как [Object].

Например, давайте исследуем следующий объект:

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'
      }
    }
  }
};

console.log(myObject);

При запуске скрипта объект propC выводится как [Object]:

Чтобы увидеть полную структуру объекта, я выведу его с помощью JSON отображения объекта используя JSON.stringify():

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'
      }
    }
  }
};

console.log(JSON.stringify(myObject, null, 2));

JSON.stringify(myObject, null, 2) возвращает JSON-отображение объекта. Третий аргумент 2 устанавливает размер отступа в пробелах.

Теперь объект выведен полностью и красиво отформатирован:

Надеюсь, что эти 5 советов сделают ваш опыт работы с консолью в JavaScript более продуктивным.