Консоль - это встроенный отладчик браузера. Многие разработчики постоянно используют console.log () для вывода сообщений и устранения проблем в своем коде. Но этот инструмент может предложить гораздо больше, чем вы могли когда-либо представить!
Введение - объект консоли
Давайте попробуем что-нибудь простое и запустим:
console.log(console)
Как мы видим, объект console может предложить гораздо больше, чем старая добрая функция console.log ().
Правда в том, что, вероятно, есть лучший способ регистрировать все, что вам нужно. Все, что нужно, - это знать альтернативные варианты, которые у вас есть, и привыкнуть к ним.
В этой статье я расскажу о некоторых наиболее полезных функциях объекта консоли, которые я освоил во время работы веб-разработчиком. Взглянув, вы можете сами решить, должен ли console.log () оставаться вашим единственным вариантом для отладки печати.
Давайте создадим тестовый объект для использования в качестве примера:
Вот как это выглядит, когда мы вызываем console.log () с нашим объектом:
console.dir ()
В то время как console.log () печатает объект в его строковом представлении, console.dir () распознает объект как объект и выводит его свойства в виде чистого расширяемого списка:
console.assert ()
С помощью console.assert () мы можем решить регистрировать что-либо, только если условие - false, и сэкономить место на консоли, избегая ненужной печати сообщений. :
console.count ()
Вместо того, чтобы увеличивать счетчик вручную, мы можем использовать console.count (), чтобы сделать эту работу за нас! Мы можем снабдить его меткой (в данном примере «Pets»), и значение счетчика будет увеличиваться каждый раз, когда вызывается console.count («Pets»):
console.table ()
Мой личный фаворит! Используйте console.table (), чтобы напечатать визуально красивое табличное представление объекта с помеченными строками для каждого свойства объекта:
console.time () / timeLog () / timeEnd ()
Популярный. Используйте console.time (), чтобы запустить таймер. Затем при каждом вызове console.timeLog () будет напечатано время, прошедшее с момента запуска таймера.
По завершении вызовите console.timeEnd (), чтобы напечатать общее количество времени:
console.trace ()
Еще один очень полезный! При отладке глубоко вложенных объектов или функций мы можем захотеть распечатать трассировку стека кода. Вызовите console.trace () из нужной функции в верхней части стека вызовов, чтобы увидеть точные места в коде, который ее вызвал:
console.group () / groupEnd ()
Сообщения можно группировать, чтобы избежать спама и беспорядка в консоли, например:
Дополнительный совет: используйте console.groupCollapsed () вместо console.group (), и группа будет свернута по умолчанию. Это также облегчает работу глаз.
Бонус: стилизация консоли с помощью CSS
На всякий случай, если вы хотите поиграть в свои новые благочестивые возможности ведения журнала, используйте «% c» перед строкой и передайте стили CSS в качестве другого аргумента:
Теперь вы можете практически использовать консоль, чтобы рисовать что угодно! 🎨
Резюме
Иногда мы не понимаем, что можем немного облегчить нашу жизнь как разработчиков, просто адаптируя новые небольшие привычки, например, будучи профессиональным консольным игроком 😎.
Надеюсь, эта информация окажется для вас полезной.
Удачной отладки!
