Форматирование сообщений в консоли JavaScript: методы и шаги

Быстрый ответ

Для обеспечения наглядности сообщений в консоли используйте функцию console.log() в сочетании с плейсхолдером %c и CSS. Например:

console.log("%cСообщение в формате", "color: red; font-weight: bold;");

Эта команда выведет фразу "Сообщение в формате" красным, жирным шрифтом, что демонстрирует применение стилей. Меняйте CSS-код, чтобы пробовать разные визуальные эффекты.

Погружение в детали: Nullius in Verba

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

console.log("%cОшибка:%c Не обнаружено", "color: red;", "color: blue;");

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

Раскройте потенциал: CSS – творческая площадка

Применение комбинированных стилей возможно при использовании нескольких %c:

console.log("%cУспешно%cОшибка%cПредупреждение", "color: green;", "color: red;", "color: orange;");

Экспериментируйте с CSS-свойствами, вроде background, padding или border, чтобы открыть новые возможности. Подумайте о создании функции customLog для удобного использования заранее настроенных стилей.

Выход на новое уровень отладки: побалуйте же себя!

При отладке или демонстрации структурированных данных можно добавить форматирование к выводу объектов:

console.log("%cДетали пользователя:", "font-weight: bold;", user);

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

Будьте осторожны: не нарушайте правила

Следуйте стандартным подходам, вместо использования хаков. Это обеспечит совместимость между различными браузерами и гарантирует безопасность работы в консоли.

Визуализация

Восприятие консоли как сцены для отладки:

console.log('%cЯ становлюсь звездой!', 'color: yellow; background: black; font-size: 20px');

Примеры стилей

Ниже приведены некоторые варианты форматирования стилей:

Профессиональные советы: находим преимущества

Подробнее об этом расскажет наш спикер на видео

Интеллектуальное применение стилей

Используйте стили DOM-элементов для вывода сообщений в консоли:

let style = window.getComputedStyle(document.querySelector('.my-element'));
console.log("%cЯ имею стиль", style.cssText);

Стиль элемента будет применён к сообщению в консоли, обеспечивая целостное восприятие.

Функции пользовательского логирования: простота и согласованность

Для стандартизации основных стилей создайте функцию customLog():

function customLog(message, style) {
  console.log(`%c${message}`, style);
}

customLog("ПОДСКАЗКА: Согласованное логирование.", "color: blue; font-style: italic;");

Эта функция упрощает повторное использование одних и тех же стилей.

Объединение объектов: ясность превыше всего

Для вывода объёмного количества данных используйте форматирование объектов:

let obj = { a: 100, b: 'String' };
console.log('Объект: %o', obj); // Объединение числа и строки в одном объекте!

В консоли вы сможете прямо сейчас исследовать детали связанных объектов!

Полезные материалы

1. Консоль – Web APIs | MDN — справочный материал MDN по API консоли.
2. Google Chrome – Цветовой вывод в консоли JavaScript | Stack Overflow — обсуждение на StackOverflow о цветовом форматировании в консоли.
3. Объект консоли | W3Schools — понятное руководство по объекту Console в JavaScript.
4. Справочник по Console API | Инструменты для разработчиков | Chrome for Developers — официальная документация по API консоли от команды разработчиков Chrome.
5. GitHub – jonnyreeves/js-logger: Легкий, ненавязчивый, настраиваемый логгер JavaScript. — набор инструментов на GitHub для настройки логирования в JavaScript.