Используйте 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`)
Счастливого обучения! 😎