7 полезных приемов работы с console.log()

Использование console.log() при отладке — один из любимых приемов разработчиков. Давайте посмотрим, как можно улучшить вывод в консоли.

1. Стилизация console.log

Так ли уж это необходимо? Вероятно, нет. Но если вы хотите оставить сообщение-пасхалку в консоли вашего сайта-портфолио, то почему бы не сделать его красивым? Никогда не знаешь, кто его найдет. Можете посмотреть мое на stefi.codes.

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

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

Результат:

2. Предупреждения, ошибки и дополнительная информация

Возможно, вы видели предупреждения (Warning) и ошибки (Errors) в консоли, но не знали, как их добавить.

Значок info больше не показывается, поэтому в Chrome визуально нет разницы между console.log и console.info.

 // 4. WARNING!
 console.warn("console.warn()");

// 5. ERROR :|
console.error("console.error()");

// 6. INFO
console.info("console.info()");

Результат:

Это полезно, поскольку браузер позволяет фильтровать по этим типам.

3. Очистка консоли

Если вам нужна чистая консоль, просто запустите команду:

console.clear();

4. Группирование

Развернутый вид

 console.group("Console group example");
 console.log("One");
 console.log("Two");
 console.log("Three");
 console.groupEnd("Console group example");

Результат:

Это бывает полезно, когда вы перебираете объект в цикле и хотите показать результаты в более упорядоченном виде, как показано ниже:

 const dogs = [
  { name: "Ashley", age: 5 },
  { name: "Bruno", age: 2 },
  { name: "Hugo", age: 8 }];

 dogs.forEach((dog) => {
  console.group(`${dog.name}`);
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age} years old`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd(`${dog.name}`);
 });

Результат:

Свернутый вид

Чтобы получить такой же результат, но чтобы список при этом был свернут, нужно поменять console.group на console.groupCollapsed.

Результат:

5. Считаем console.log-и

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

 // 11. COUNTING
 console.count("one");
 console.count("one");
 console.count("one");
 console.count("two");
 console.count("three");
 console.count("two");

Результат:

6. Вывод массивов или объектов в виде таблицы

Организовать вывод объекта или массива можно при помощи метода console.table().

 // 13. TABLE for ARRAYS
 const dogs = [
 { name: "Ashley", age: 5 },
 { name: "Bruno", age: 2 },
 { name: "Hugo", age: 8 },
 ];

 const cats = ["Juno", "Luna", "Zoe"];      
 console.table(dogs);
 console.table(cats);

Результат:

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

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

const emoji = "🙈"
console.log("This %s is my favorite!", emoji);

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

const emoji = "🙈"
console.log("This " + emoji+ " is my favorite emoji");

То же самое можно сделать с шаблонными литералами:

const emoji = "🙈"
console.log(`This ${emoji} is my favorite emoji`);

Чтобы познакомиться с другими консольными методами, загляните на MDN Web Docs.

Перевод статьи «7 Tips & tricks to make your console.log() output stand out».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]