Расширенная отладка с помощью консольного API

Каждый из нас использовал console.log для отладки больше, чем мы думаем. Я использую его несколько раз в день, чтобы проверять свои изменения, но в основном делаю это только с console.log. Тем не менее, консольный API предоставляет гораздо больше функциональных возможностей, чем это - больше, чем большинство из нас думает.

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

Давайте начнем с самого начала с простой вещи, которую все мы знаем: уровней журнала.

1. Уровни журнала

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

Глядя на GIF выше, вы уже можете увидеть различные доступные уровни журнала. По умолчанию Verbose отключен, поэтому вы не увидите журнал отладки, пока он не будет отмечен. То же самое и с тремя другими.

Следующий уровень, информационный, отвечает за обработку console.info. Если снять флажок с информации, console.info и console.log будут скрыты. Эти два эквивалента. Однако предупреждения и ошибки будут иметь другой стиль.

Как видите, между console.log и console.info нет визуальной разницы. Оба могут использоваться для выхода из системы с общей информацией.

Вам следует использовать warn, когда с вашим приложением что-то не так, но оно может восстанавливаться автоматически и не влияет на работу. Хотя error следует использовать в случае, если это влияет на пользовательский поток и может привести к сбою и остановке вашего приложения.

2. Dir и DirXml

Если вам нужны дополнительные возможности отладки, возможно, вы ищете dir и dirxml.

Оба используются для отображения интерактивного списка объекта. Давайте посмотрим на несколько примеров. Допустим, вы хотите выйти из свойств элемента DOM. Ясно, что если вы используете console.log, вы получите представление HTML. Это также тот случай, когда вы используете console.dirxml. Как следует из названия, он отображает XML или HTML-представление указанного объекта.

Но не с console.dir. Как видно из приведенного выше примера, в этом случае log и dirxml идентичны. Но console.dir отключает тело в представлении объекта JavaScript.

Какие еще есть случаи? Есть определенные объекты, которые log привязывают к строкам. Лучшим примером будет regex:

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

3. Форматирование

Если предыдущие примеры по-прежнему не соответствуют вашим потребностям, вы можете использовать другие варианты форматирования. Один из них console.table. Он отображает переданные данные - , которые могут быть массивом или объектом - в таблице.

И если вы хотите, чтобы ваши сообщения действительно выделялись, потому что вы не можете найти то, что ищете в море сообщений консоли, вы можете указать стили CSS в качестве второго аргумента console.log.

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

4. Группировка

Говоря о том, чтобы заблудиться среди журналов, вы также можете сгруппировать сообщения, чтобы сэкономить место и сделать вашу консоль более читаемой. Взгляните на следующий пример и его результат:

В случае, если вам трудно читать, и ваша консоль становится загроможденной, мы также можем использовать метод groupCollapsed для вывода группы как свернутой по умолчанию:

5. Утверждения

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

Это то, для чего нужен console.assert. Он ожидает утверждения и, если он оценивается как false, выводит трассировку стека на консоль.

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

6. Отладка

Мы использовали утверждения и посмотрим, как все провалилось. Нам нужен способ отладки. Для отладки мы можем использовать console.trace. Он используется для отображения трассировки стека:

Кроме того, если вы подозреваете, что у вас проблемы с памятью, например, утечка памяти, вы можете распечатать данные об использовании памяти с помощью console.memory.

7. Мониторинг производительности

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

Итак, вы хотите измерить производительность. Вы думаете, что это из-за цикла for, который вы реализовали ранее для заполнения страницы цыплятами. Для измерения производительности мы можем использовать console.time.

Вызывая console.time с именем, а затем вызывая console.timeEnd с тем же именем и выполняя промежуточную операцию, мы можем измерить время, необходимое для выполнения цикла.

Если вы хотите время от времени выходить из системы через определенные промежутки времени, вы также можете использовать timeLog.

Вызов timeLog приведет к выходу текущего значения времени.

8. Обратный отсчет

И вот мы подошли к концу этого списка, так что давайте обратим отсчет - или, скорее, вверх - перед тем, как подвести итоги.

count ожидает метку в качестве параметра.

Этот ярлык будет напечатан вместе с количеством вызовов. Это полезно, если вы хотите знать, сколько раз вызывалась функция или рендерился компонент. Если вы хотите сбросить счетчик и начать заново, вы можете использовать countReset.

9. Начало с новой страницы

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

Надеюсь, вы узнали что-то новое. Если вы зашли так далеко, спасибо за ваше время. Пришло время сделать перерыв и поиграть с настоящей консолью. 🕹️