Функция console.log— один из наиболее часто используемых методов в JavaScript! Он обычно используется для отладки, но знаете ли вы все его секреты? Давайте посмотрим!
1. Вы можете добавить CSS!
Знаете ли вы, что журналы консоли поддерживают CSS?
Для этого вы должны начать сообщение журнала с %c и передать стили в качестве второго аргумента:
console.log("%cAn Error Happened!", "font-size: 10px; margin: 30px 0; padding: 5px 20px; color: #fff; background: linear-gradient(0deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);")
2. Предупреждения, ошибки и информация
Существуют разные уровни журналов , подходящие для разных целей. Вы также можете отфильтровать их в консоли DevTools.
console.error("console.error()");
console.info("console.info()");
console.warn("console.warn()");
3. Очистка консоли
Когда консоль становится грязной, вы можете запустить console.clear()или использовать Ctrl+L, чтобы очистить ее!
4. Группировка
Группируйте консольные сообщения вместе, используя console.group()и console.groupEnd().
console.group("Numbers");
console.group("Even");
console.log(2);
console.log(4);
console.groupEnd();
console.group("Odd");
console.log(1);
console.log(3);
console.groupEnd();
console.groupEnd();
5. Подсчет похожих сообщений
Вы можете подсчитать, сколько раз вы зарегистрировали определенное сообщение, используя console.count():
console.count("one");
console.count("one");
console.count("one");
console.count("two");
console.count("three");
console.count("two");
6. Вывод массивов или объектов в виде таблицы
У вас есть табличные данные, такие как объект или массив? Отобразите его в виде таблицы, используя console.table():
const family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);
7. Измерение производительности
Вы хотите знать, насколько быстро работает функция? Это легко сделать с помощью console.time():
console.time("Performance:")
for(let i = 0; i < 100000; i++){ Math.sqrt(i) }
console.timeEnd("Performance:")
8. Отображение HTML-элементов
Выведите интуитивно понятное представление элементов HTML, используя console.dirxml:
console.dirxml(document.body)
9. Просмотр объектов JavaScript
Вы можете создать интуитивно понятное представление объектов JavaScript, используя console.dir:
console.dir({firstName: 'Jane', lastName: 'Smith'})
Узнали что-то новое? Ставьте лайк 👍
Если свои секреты работы в консоли? Поделитесь в комментариях 👇