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

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

От автора: в этом посте представлены 5 полезных советов, которые помогут вам стать более эффективными при использовании console.log().

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

console.log('My message');
// logs "My message" const myVar = 12;
console.log(myVar);
// logs 12

1. Именование зарегистрированных переменных

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

function sum(a, b) { console.log(b); return a + b;
} sum(1, 2);
sum(4, 5);

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

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

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

function sum(a, b) { console.log({ b }); return a + b;
} sum(1, 2);
sum(4, 5);

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

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

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. Вывод со стилем

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

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

Спецификатор %c применяет стили CSS ‘font-size: 36px; font-weight: bold’. Вот как выглядит лог с примененными стилями в консоли Chrome:

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

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

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

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

4.1 Объекты

const myObject = { name: 'John Smith', profession: 'agent'
}; console.log(myObject);

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

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

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

4.2 Массивы

const characters = ['Neo', 'Morpheus', 'John Smith']; console.log(characters);

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

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

4.3 Деревья DOM

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

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

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

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

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

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

const myObject = { name: 'John Smith', profession: 'agent'
}; console.log('Neo, be aware of %o', myObject);

Глядя на консоль, массив myObject не преобразуется в строку, а поддерживается в интерактивном режиме.

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

5. Регистрация больших объектов в консоли Node

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

const myObject = { propA: { propB: { propC: { propD: 'hello' } } }
}; console.log(myObject);

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

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

5.1 Перевод в строки большого объекта

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

const myObject = { propA: { propB: { propC: { propD: 'hello' } } }
}; console.log(JSON.stringify(myObject, null, 2));

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

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

5.2 console.dir() с неограниченной глубиной

Хорошей альтернативой при глубоком отображении объекта является вызов console.dir() без ограничения глубины объекта:

const myObject = { propA: { propB: { propC: { propD: 'hello' } } }
}; console.dir(myObject, { depth: null });

console.dir() вызывается с { depth: null } в качестве второго аргумента, который выводит объект. Вот как выглядит вывод в консоли:

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

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

Автор: Dmitri Pavlutin

Источник: https://dmitripavlutin.com

Редакция: Команда webformyself.