От автора: в этом посте представлены 5 полезных советов, которые помогут вам стать более эффективными при использовании console.log().
Использование console.log(message) просто: аргумент message выводится в консоль.
|
1 2 3 4 5 6 |
console.log('My message'); // logs "My message" const myVar = 12; console.log(myVar); // logs 12 |
1. Именование зарегистрированных переменных
При логгинге многих переменных иногда трудно понять, какая переменная соответствует логу в консоли. Например, давайте выведем некоторые переменные:
|
1 2 3 4 5 6 |
function sum(a, b) { console.log(b); return a + b; } sum(1, 2); sum(4, 5); |
Когда приведенный выше код будет выполнен, вы увидите только последовательность чисел:
Чтобы указать связь между зарегистрированным значением и переменной, оберните переменную в пару фигурных скобок { b }:
|
1 2 3 4 5 6 |
function sum(a, b) { console.log({ b }); return a + b; } sum(1, 2); sum(4, 5); |
Теперь, глядя на консоль, вы можете видеть, что выводится именно переменная b:
2. Расширенное форматирование
Самый распространенный способ вывести что-то в консоль — просто вызвать console.log() с одним аргументом:
|
1 2 |
console.log('My message'); // logs "My message" |
Иногда вам может понадобиться сообщение, содержащее несколько переменных. К счастью, console.log() может форматировать строку способом sprintf(), используя спецификаторы, такие как %s, %i и т. д. Например, давайте отформатируем сообщение, содержащее строку и целое число:
|
1 2 3 4 5 |
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. Например, давайте выведем сообщение с увеличенным размером шрифта и толщиной шрифта:
|
1 |
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 Объекты
|
1 2 3 4 5 6 |
const myObject = { name: 'John Smith', profession: 'agent' }; console.log(myObject); |
В консоли Chrome myObject выглядит так:
Вы можете развернуть и свернуть список свойств объекта. Также вы можете увидеть прототип объекта.
4.2 Массивы
|
1 2 3 |
const characters = ['Neo', 'Morpheus', 'John Smith']; console.log(characters); |
Chrome выводит массив characters следующим образом:
4.3 Деревья DOM
Вы можете напрямую взаимодействовать с элементом DOM, который отображается в консоли.
|
1 |
console.log(document.getElementById('root')); |
В консоли Chrome элемент DOM может быть развернут, а его содержимое может быть просмотрено полностью:
4.4 Интерактивные логи внутри сообщений
Спецификатор %o (который приводит форматирование лога для значения) может вставлять массивы, объекты, элементы DOM и обычный текст в текстовое сообщение, не теряя интерактивность. Следующий фрагмент выводит сообщение, содержащее объект:
|
1 2 3 4 5 6 |
const myObject = { name: 'John Smith', profession: 'agent' }; console.log('Neo, be aware of %o', myObject); |
Глядя на консоль, массив myObject не преобразуется в строку, а поддерживается в интерактивном режиме.
5. Регистрация больших объектов в консоли Node
Логи в Node выводятся в виде простого текста. Однако console.log() в Node не отображают объекты с несколькими уровнями вложенности: объекты на уровне 3 отображаются как [Object]. Например, давайте запишем следующий объект:
|
1 2 3 4 5 6 7 8 9 10 11 |
const myObject = { propA: { propB: { propC: { propD: 'hello' } } } }; console.log(myObject); |
При запуске скрипта объект propC выводится как [Object]:
5.1 Перевод в строки большого объекта
Чтобы увидеть полную структуру объекта, я записываю JSON-представление объекта, используя JSON.stringify():
|
1 2 3 4 5 6 7 8 9 10 11 |
const myObject = { propA: { propB: { propC: { propD: 'hello' } } } }; console.log(JSON.stringify(myObject, null, 2)); |
JSON.stringify(myObject, null, 2) возвращает JSON-представление объекта. Третий аргумент 2 устанавливает размер отступа в пробелах. Теперь объект выведен полностью и красиво отформатирован:
5.2 console.dir() с неограниченной глубиной
Хорошей альтернативой при глубоком отображении объекта является вызов console.dir() без ограничения глубины объекта:
|
1 2 3 4 5 6 7 8 9 10 11 |
const myObject = { propA: { propB: { propC: { propD: 'hello' } } } }; console.dir(myObject, { depth: null }); |
console.dir() вызывается с { depth: null } в качестве второго аргумента, который выводит объект. Вот как выглядит вывод в консоли:
Надеемся, что эти 5 советов сделают ваш опыт логгинга в JavaScript более эффективным.
Автор: Dmitri Pavlutin
Источник: //dmitripavlutin.com
Редакция: Команда webformyself.
