Используйте console.log() в качестве эксперта!

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

Одна из наиболее часто используемых и простых вещей для входа в JavaScript — это console.log(). Однако есть много вариантов более эффективного использования консоли. В этой статье я хочу показать вам, как мы можем более эффективно использовать console.log. Давай начнем!

Стили с помощью console.log()

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

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

> console.log(
  "%cDebug with style with these console.log tricks",
  "font-size:50px; background:#F9F9F9; color:#581845; padding:10px; border-radius:10px;"
)

Используйте таблицы

Мы можем пойти еще дальше, поместив объекты в таблицу, чтобы сделать ее более читаемой. Используйте console.table(), когда у вас есть объекты с общими свойствами или массив объектов. Здесь мы можем использовать console.table({x, y}), и консоль покажет:

Группировать сгруппированные журналы

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

Например, если вы регистрируете данные пользователя:

> console.group('User Details')
> console.log('name: Sunil Sandhu')
> console.log('position: Software Developer')
> console.groupEnd();console.group('Account')
> console.log('Member Type: Premium Member')
> console.log('Member Since: 2018')
> console.log('Expiry Date: 20/12/2022')
> console.groupEnd()

Вы даже можете вкладывать группы внутрь других, если хотите:

> console.group('User Details')
> console.log('name: Sunil Sandhu')
> console.log('position: Software Developer');console.group('Account')
> console.log('Member Type: Premium Member')
> console.log('Member Since: 2018')
> console.log('Expiry Date: 20/12/2022')
> console.groupEnd()
> console.groupEnd()
// notice that we have two groupEnd() calls at the end as we want to nest 'Account' inside of 'User Details'

Подсчитайте с помощью console.log()

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

> console.count("name")
> console.count("name")
> console.count("name")
> console.count("surname")
> console.count("surname")

Предупреждения и ошибки

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

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

> console.warn("This is a warning with yellow color!")
> console.error("This is an error with red color!")

Подстановка строк и литералы шаблонов

Подстановка строк все еще используется? Для стилизации console.log да, но для других вариантов использования мы можем использовать литералы шаблонов, я так не думаю. Но вот как это сделать:

> const sayhi = "Hi 👻"
> console.log("%s My name is Emre", sayhi)

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

> const sayhi = "Hi 👻"
> console.log(sayhi+ " My name is Emre")

С включенными литералами шаблона можно легко вывести это, как показано ниже:

> const sayhi = "Hi 👻"
> console.log(`${sayhi} My name is Emre`)

Счастливого обучения! 😎