Вся міць console.log() консолі веб-браузера

console.log — популярний серед веб-розробників метод із Console API. Але мало відомо, що log() є лише одним із багатьох консольних методів.

Зазвичай під час використання та запуску веб-бібліотек ми отримуємо повідомлення про попередження (зазвичай жовті) та помилки (червоні) у консолі devTools. Але чи знаєте ви, як це відтворити?

Це просто. console.log() виводить нейтральні повідомлення у консолі, console.warn() — жовті, а console.error() — червоні. Познайомимося з усіма можливостями консольного об’єкта.

Консольні методи

  • console.log() — для загального виведення інформації;
  • console.info() — інформативні повідомлення;
  • console.debug() — повідомлення, пов’язані із процесом відлагодження (debug);
  • console.warn() — попереджувальна інформація;
  • console.error() — повідомлення про помилку;
  • console.assert() — запис повідомлення про помилку в консолі у разі, якщо твердження помилкове. Якщо істинне, то нічого не відбувається;
  • console.clear() — очищення консолі;
  • console.count() — повернення числа, що дорівнює тому, скільки разів була викликана конкретна функція count();
  • console.dir() — відображення інтерактивного списку властивостей зазначеного об'єкта JavaScript;
  • console.group() — створення нової групи повідомлень у веб-консолі;
  • console.groupEnd() — завершення поточної створеної групи у консолі методом console.group() або console.groupCollapsed();
  • console.memory — властивість, яку можна використовувати для перевірки стану розміру купи (heap);
  • console.table() — відображення табличних даних у вигляді таблиці;
  • console.time() — запуск таймера, який можна використовувати для визначення, скільки часу займає виконання тієї чи іншої операції;
  • console.timeEnd() — зупинка вказаного таймера та реєстрація часу, що минув у секундах з моменту його запуску;
  • console.trace() — виведення трасування стеку.

Стилі консолі

Ми можемо застосувати власний стиль зовнішнього вигляду повідомлень у веб-консолі, так само, як робимо це з елементами веб-сторінки.

Щоб застосувати стилі до консолі, будемо використовувати специфікатор формату %c. Далі запускаємо консольне повідомлення, яке зазвичай є рядком, а в кінці додаємо необхідні CSS-стилі.

Приклад:

console.log('%c CONSOLE POWER!', 'margin: 10px; font-weight: bold; font-size: 30px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)');

Результат у консолі:

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *