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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

2. Расширенное форматирование

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

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

%s и %i заменяются значениями user и attempts. Спецификатор %s конвертируется в строку, а %i конвертируется в число. Вот список доступных спецификаторов:

%s — Элемент преобразуется в строку

%d или же %i — Элемент преобразуется в целое число

%f — Элемент преобразуется в число с плавающей запятой

%o — Элемент отображается с оптимально полезным форматированием

%O — Элемент отображается с общим форматированием объекта JavaScript

%c — Применяет предоставленный CSS

3. Вывод со стилем

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

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

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

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

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

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

4.1 Объекты

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

4.2 Массивы

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

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

4.3 Деревья DOM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Dmitri Pavlutin

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий