Игры с консолью: советы и хитрости по использованию 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()
доступно по ссылке.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: