Блог “У Василича”

Вокруг браузерных API: Console API

Приблизительное время чтения9 мин.
Фото от Markus Spiske

Посмотрим, что полезного можно почерпнуть из Console API за пределами console.log и чем различаются реализации интерфейса между браузерами

Семантика логов

Console API предоставляет несколько методов, которые работают одинаково, различаясь только семантикой, то есть назначением лога. console.log семантически нейтрален — его можно сравнить с тегом div в HTML, когда остальные методы — с тегами header, footer, main, section и т.д. — аналогичные блоки, но уже с семантической спецификой.

Эти методы:

  1. console.log — семантически нейтральный лог
  2. console.debug — сообщение отладки
  3. console.info — информационное сообщение
  4. console.warn — предупреждение
  5. console.error — сообщение об ошибке

При использовании семантически окрашенного метода браузер может применить к логу дополнительную стилизацию и расширить функционал. К примеру, если это ошибка, то логично использовать console.error вместо console.log, чтобы получить не просто текст, а окрашенное в красный цвет сообщение со стек трейсом.

Метод console.debug, как мне кажется, среди них наименее известный, что удивительно, ведь большинство разработчиков используют логи именно для отладки, так что применение этого метода было бы предпочтительнее.

Сравнение 5 методов лога в консоли Chrome
Chrome. debug выделен цветом, info не отличается от log, warn и error выделяются иконками и цветом и снабжены стек трейсом

Сравнение 5 методов лога в консоли Firefox
Firefox. debug не отличается от log, info выделен иконкой, warn и error – иконками и фоном, у error стек трейс

Сравнение 5 методов лога в консоли Safari
Safari. У всех своя иконка, warn и error выделены фоном, у error стек трейс

Помимо изменения визуальной составляющей выводимых сообщений инструменты разработчика поддерживают фильтрацию по типу логов: так мы можем выбрать только интересующие нас уровни, например скрыть назойливые варнинги из дебрей node_modules. Реализация фильтров между браузерами разнится, и отличаются сами группы фильтров.

Реализация фильтров в Chrome devtools
Chrome. log и info объединены в одну группу Info, для отображения debug нужно активировать группу Verbose. Реализация через множественный селект. По дефолту активированы все группы кроме Verbose, что, как говорит молодёжь, 'сос мыслом', т.к. сообщения дебага, которые можно пропустить при разработке, исчезают из консоли

Реализация фильтров в Firefox devtools
Firefox. log и info в отдельных группах Logs и Info, под debug так же отдельная группа Debug. Реализация через кнопки-тогглы. По дефолту выбраны все группы

Реализация фильтров в Safari devtools
Safari. log, info и debug объединены в одну группу Logs. Реализация не позволяет выбирать несколько групп, и при выборе исчезает код. По дефолту выбрана опция All

Соблюдая семантику, логи легче визуально различать, к ним может добавляться вспомогательный функционал на рассмотрение браузера вроде стек трейса для console.error, и мы можем использовать фильтры. К тому же за таким кодом проще следить: например, при выкате в прод найти поиском по проекту все сообщения console.debug и удалить, или вообще настроить линтер на вывод варнингов на дебаги через правило no-console.

Строковые подстановки

Чтобы вывести строку, содержащую переменные, можно попробовать передать в console.log (или в его семантических побратимов) несколько аргументов, но в результате выведется не единая строка, а несколько отдельных переменных. Вместо этого можно использовать шаблонные строки — это уже рабочий вариант. Альтернативно в методах консоли можно использовать подстановки (как в Сишнике!). Первым аргументом передаём шаблон строки со специальными директивами вместо переменных, а следующими аргументами загружаем переменные, которые встанут на их место.

Сравнение подходов к выводу составных строк в консоли Firefox
Firefox. 4 варианта вывода составной строки разной степени паршивости

Из директив доступны строки %s, целые числа %d (%i), числа с плавающей запятой %f и объекты %o (%O). Числа дополнительно поддерживают форматирование по типу %.2f, чего не добиться через шаблонные строки. Chrome, на удивление, их не поддерживает, однако если написать, то ничего страшного не произойдёт — просто в этом браузере будет выведено неотформатированное число (progressive enhancement, все дела).

Подстановки — классная вещь, добавляющая вашим логам свэга. Их даже проще читать, чем шаблонные строки, на мой субъективный вкус. Ну и возможность форматирования здесь как приятный бонус.

Стилизация сообщений

Внешний вид сообщений можно настраивать — для этого существует специальная директива %c. Синтаксис аналогичен всем прочим подстановкам — указываете начало стилизованного текста в шаблоне, вторым аргументом передаёте CSS аналогично инлайну в атрибут style. Большинство CSS стилей, которые вы в обиходе используете для форматирования, здесь поддерживаются (даже повторяющиеся радиальные градиенты!). Но опять же, зависит от браузера, например Firefox’у и Safari как-то не понравились мои вертикальные поля.

Стилизованное сообщение "We are hiring!" в консоли Chrome
Chrome. Некоторые конторы любят оставлять подобные пасхалки для потенциальных соискателей

Вы можете задаться вопросом: “Можно ли разукрасить только часть сообщения?“. Ну… синтаксиса для закрытия директивы в API нет, но это не мешает добавить вторую директиву, которая будет обнулять стили. Так что да, это возможно: console.log('White %cRed%c White', 'color: red;', '').

Логирование объектов

console.dir

Метод выводит переданный объект в виде интерактивного набора полей. Логика такая, что console.dir выводит всегда строго объект, а console.log подстраивается под контекст и использует наиболее подходящее отображение.

Сравнение результатов log и dir для объектного литерала в консоли Chrome
Chrome. log принял более наглядный вид чем строгий dir, но при раскрытии они идентичны

Сравнение результатов log и dir для объектного литерала в консоли Firefox
Firefox. Опять же log поприятнее, раскрытые совпадают, но dir сразу раскрыт

Сравнение результатов log и dir для объектного литерала в консоли Safari
Safari. log для литерала вообще не выводит дерева, dir аналогичен другим браузерам

DOM элементы — тоже объекты, но особенные. При выводе DOM элемента в консоли браузер вместо набора полей может отобразить фрагмент разметки, аналогичный вкладке Elements. Чтобы настоять на выводе разметки, придуман метод console.dirxml.

Сравнение результатов log, dirxml и dir для document.head в консоли Chrome
Chrome. log и dirxml выводят разметку, dir – объект

Сравнение результатов log, dirxml и dir для document.head в консоли Firefox
Firefox. Не умеет в вывод разметки: все методы выводят представление через объект, просто результат dir развёрнут по умолчанию

Сравнение результатов log, dirxml и dir для document.head в консоли Safari
Safari. Поведение аналогично Chrome

Суммируя, особого профита в использовании console.dir и console.dirxml нет, т.к. console.log в современных браузерах довольно умный. В былые времена он выводил для объектов результат toString(), но сейчас всё на высшем уровне. Разве что, если вы точно знаете какое отображение вам нужно, тогда эти более строгие методы — ваш выбор.

console.table

Метод представляет объект (или массив, но массив в JS тоже объект, так что…) через стильную таблицу. Идеально подходит для отображения крупных объектов без лишних вложенностей, т.к. подаёт информацию более наглядно. Например, вы мутите датавиз и хотите ознакомиться со структурой данных — самое то.

Данные по 20 фильмам, представленные в виде таблицы, в консоли Chrome
Chrome. Таблица выводится полностью, поддерживает сортировку, содержимое вложенных объектов не уточняется. Также под таблицей выводится результат метода console.dir

Данные по 20 фильмам, представленные в виде таблицы, в консоли Firefox
Firefox. Таблица фиксированной высоты со скроллом, сортировки нет, со вложенными объектами можно взаимодействовать

Данные по 20 фильмам, представленные в виде таблицы, в консоли Safari
Safari. Таблица выводится полностью, поддерживает сортировку, вложенные объекты вообще не показываются

console.table поддерживает второй аргумент — список колонок для отображения. Так для нагруженного фрагмента данных вызов console.table(data, ['title', 'budget', 'revenue']) оставит только важные для дальнейшей обработки поля.

Данные по 20 фильмам с уменьшенным числом колонок в консоли Chrome
Chrome. За счёт вывода только релевантных столбцов значительно снижается визуальный шум

По верхам остальных методов

API предоставляет достаточно много методов для более специфичных задач. Вкратце что это за методы, и когда они могут пригодиться:

  • console.count — выводит количество собственных вызовов. При отладке при подсчёте числа вызовов некоторого фрагмента кода крутые челиксы могут написать console.count() и сразу получить в консоли число вместо того, чтобы писать что-то вроде console.log('test') и вести подсчёт числа выведенных строк. Передавая аргументом лейбл, можно создать несколько счётчиков. Через console.countReset можно сбрасывать счётчик в ноль
  • console.time — замеряет время. console.time запускает счётчик, console.timeEnd — останавливает и логирует время, через console.timeLog выводится время во время работы таймера. Подойдёт для простейших замеров — для полноценного мониторинга предпочтительнее Performance API
  • console.group — проставляется между логами для группировки их в раскрывающиеся блоки. console.group начинает группу, console.groupEnd завершает, и console.groupCollapsed аналогичен console.group, только группа свёрнута по дефолту. Одна из таких фич, которая используется примерно никогда, но просто нужно помнить, что она есть, если вдруг понадобится
  • console.assert — вывод сообщения об ошибке, если предположение неверно (возвращает “falsy value”). Читай, нативная имплементация assertion library
  • console.trace — выводит стек трейс для места программы, из которого вызван. При передаче аргументов просто выведет их рядом аналогично логу
  • console.clear — очистка консоли. Используется для программной очистки, во всех браузерах для этого и так есть специальная кнопка

Подводя итог, из всего вышесказанного я бы выделил следующий набор рекомендаций для становления лучшего себя:

  1. Использовать console.debug при отладке более корректно, нежели console.log
  2. Вызов семантически окрашенных console.info, console.warn и console.error добавляет возможностей в devtools
  3. Вывод составных строк может быть проще с директивами подстановки наподобие %s
  4. Сообщения можно стилизовать через %c — синтаксически это такая же директива, где вторым аргументом идёт инлайновый CSS
  5. В некоторых случаях при логировании объекта console.table может дать более наглядный результат
  6. Стоит держать в голове список возможностей API, которые в определённых случаях могут оказаться полезны
p1t1ch.com