Мы все отлаживаем, используя console.log, давайте сделаем его еще лучше!
Введение
Многие люди отлаживают, используя console.log. Несмотря на то, что это не совсем лучший метод, мы делаем это, потому что в большинстве случаев он работает. Но все используют только console.log, в то время как объект console имеет поразительное количество различных функций.
Возможно, вы видели несколько функций для регистрации ошибок, предупреждений или другой подробной информации без использования .log, но слышали ли вы обо всех этих функциях консоли?
Отлаживать
Нет ничего хуже, чем случайные console.logs, когда пользователь или любопытный программист открывает консоль для десятков случайных журналов в консоли.
В большинстве браузеров по умолчанию установлены «уровни по умолчанию». Это означает, что консоль будет показывать что угодно, кроме подробных журналов.
Но вы можете использовать это в своих интересах и использовать функцию console.debug, которая будет отображаться только в том случае, если включены подробные журналы.
Еще можно попробовать удалить все ненужные журналы при развертывании или добавить к ним строку типа «DEBUG: ‹message›».
Информация
Функция console.info() действует так же, как функция журнала по умолчанию, но в Firefox рядом с ней отображается небольшой значок информации.
Предупреждение и ошибка
Я не сомневаюсь, что вы видели это раньше. Любой программист будет дрожать при мысли об ошибке, и, в зависимости от технического стека, вы можете даже не заботиться о предупреждениях. Но они определенно могут повысить уровень вашей игры в ведение журнала.
console.warn полезен для предупреждения разработчиков о некоторых вещах, которые не обязательно нарушают работу приложения. Такие вещи, как данные, которые еще не загружены, или устаревшие версии пакетов, скорее всего, будут возвращать предупреждения.
console.error выдает в консоли сообщения красного цвета, и когда это случается, вероятно, происходит что-то плохое. Файлы не найдены, запросы API, возвращающие 404, и тому подобное.
Но при отладке мы на самом деле не используем их, хотя это может быть хорошей практикой. При проверке с помощью оператора if на пустые значения будет возвращено предупреждение, если оно равно нулю, хотя этого не должно быть, или ошибка, если запрос API был выполнен неправильно.
Группировка
Вы это уже видели? Я уверен, что нет, потому что я точно не знал. Группировка осуществляется функциями console.group и console.groupEnd. Они не поддерживаются старыми браузерами, но внедряются все чаще и чаще.
Это может быть полезно, когда вы регистрируете множество отладочных сообщений в определенных компонентах ваших приложений. Например, поток одного компонента React с вызовами API и протоколированием состояния в определенное время в вашем приложении.
Как мы видим на изображении выше, вы можете использовать все обычные функции ведения журнала, такие как .warn, внутри групп.
Вы также можете давать названия группам. На изображении выше мы не передаем никаких параметров нашим group и groupEnd функциям, но добавление меток может улучшить читаемость.
Сворачиваемая группа теперь называется «Имя группы». Таким образом, вы можете назначить определенную группу для определенного компонента или части вашего приложения.
Чтобы создать группу, которая вначале свернута, а не развернута, вы можете использовать функцию console.groupCollapsed(). Это немного очистит консоль, и вам придется расширить группу, чтобы увидеть, что находится внутри.
Считать
Функция console.count() просто подсчитывает при вызове и начинается с 1. Это может быть полезно в циклах, когда вы не уверены, сколько итераций у нее есть. console.countReset() сбросит счетчик. Вы также можете присвоить этим функциям строку настраиваемого ярлыка, и она будет отображать ее вместо по умолчанию.
Теперь я согласен с тем, что это может быть не самая полезная функция, но я никогда не видел, чтобы она использовалась, и хотел бы включить ее в этот список.
След
Трассировки стека часто возникают из-за ошибок, но что, если это нужно для отладки? Функция console.trace здесь, чтобы помочь.
Он вернет сворачиваемый список вызовов функций. Это может быть очень полезно в больших приложениях, где выполнение функций может быть не таким простым, как могло бы быть.
Прозрачный
После того, как мы закончим со всем. Компоненты загружены, вызовы API выполнены, мы наконец можем оставить все это позади и очистить консоль.
Использование console.clear() очистит консоль для вас. Это может быть полезно, если вы не хотите показывать пользователю определенные сообщения при развертывании.
Вывод
Объект консоли в JavaScript намного более продвинутый и имеет больше функций, чем полагают разработчики. И хотя это не лучший способ отладки, он работает большую часть времени, но выглядит очень плохо при отладке огромных приложений. И эти функции могут немного это исправить.
Спасибо за чтение и удачного дня.
