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

Недостатки использование console.log для отладки

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

В этом есть несколько недостатков.

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

Часто случается так, что console.log забываются в нескольких местах кода, что кроме гипотетической потери производительности (мизерной, но размер которой варьируется в зависимости от объема данных, вызываемых через метод console.log) загрязняя ваш код.

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

Таким образом, вы будете иметь полный контроль над жизненным циклом вашего кода и не забудете свой console.log в своем коде.

Смотреть. Отладка JavaScript с помощью Chrome DevTools или Использование отладчика JavaScript от Mozilla Firefox.

Использование только метода console.log

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

Объект console, предоставляет доступ к отладочной консоли браузера и имеет множество методов с очень специфическими применениями.

Вот исчерпывающий список наиболее часто используемых методов:

console.error → Выводит сообщение об ошибке
console.warn → Выводит предупреждающее сообщение
console.info → Выводит информативное сообщение (особый рендеринг в Firefox, но технически идентичен console.log)
console.log → Выводит глобальное сообщение
console.debug → Выводит сообщение, если консоль настроена на показ сообщений уровня отладки
console.table → Выводит данные массива/объекта в виде таблицы
console.time (в связке с console.timeEnd) → Позволяет установить таймер, чтобы увидеть, как долго задача должна быть выполнена

Конкретный пример использования console.debug метода

Лично я использую debug метод в трех ситуациях.

В первом случае мы хотим быстро отобразить часть информации на экране (например, значение переменной). Данное сообщение по умолчанию будет «скрытым» для пользователя (за исключением случаев, когда консоль настроена в специальном режиме).

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

В третьем случае мы хотим использовать отладку в работающем приложении. Например, функция, зарегистрированная непосредственно в объекте window, может инициировать вывод в пользовательскую консоль. Этот вариант может быть полезен, когда в нашем распоряжении нет среды для тестирования и когда ошибку, обнаруженную клиентом, трудно воспроизвести в среде разработки.

Удалить console.debug из рабочей версии

За исключением третьего случая, который мы только что рассмотрели, я советую вам использовать что-то вроде git pre-commit хука или плагина для проверки методов или ключевых слов, которые вы не хотите видеть в рабочей версии приложения.

Вы можете использовать UglifyJS для фильтрации по этим ключевым словам.

Спасибо, за внимание 🙏.

Текст переведен с английского: оригинал