Игры с консолью: советы и хитрости по использованию console.log()

Использование console.log() для отладки JavaScript — одна из самых распространенных практик среди разработчиков, но этот инструмент способен на большее. Фронтенд-разработчик Стефи Рошка опубликовала пост с приемами, которые позволят использовать console.log() на продвинутом уровне. 

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

Понадобится ли вам это? Скорее всего, нет, но если хотите оставить «пасхалку» на консоли вашего сайта-портфолио, сделайте ее стилизованной, как на примере ниже: 

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

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

Что получится:

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

Возможно, вы видели предупреждения и ошибки в консоли, но не знали, как их добавить. Иконка 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. Группировка

Для упрощенной работы с логами можно сгруппировать их.

1.Расширенный список

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}`);
});

Что получится:

2. Свернутый список

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

Что получится:

5. Ведение журналов console.logs

Метод 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.group(). 

// 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`);

Больше приемов для работы с console.log() доступно по ссылке.