Настройка вывода console.log() с помощью CSS: методы и примеры

Чтобы настроить внешний вид вывода console.log()в CSS, вы можете использовать спецификатор формата %cвместе со стилями CSS. Вот пример:

console.log('%cHello, World!', 'color: blue; font-size: 20px;');

В приведенном выше примере текст «Hello, World!» будет зарегистрирован на консоли синим цветом и размером шрифта 20 пикселей.

Вот несколько дополнительных методов настройки console.log()с помощью CSS:

  1. Встроенный CSS:

    console.log('%cHello, World!', 'color: blue; font-size: 20px;');
  2. Классы CSS:

    console.log('%cHello, World!', 'my-custom-class');

    И определите стили в CSS:

    .my-custom-class {
     color: blue;
     font-size: 20px;
    }
  3. Переменные CSS:

    console.log('%cHello, World!', 'var(--custom-color)');

    И определите переменную CSS в своем CSS:

    :root {
     --custom-color: blue;
    }
  4. CSS-фреймворки.
    Если вы используете CSS-фреймворк, такой как Bootstrap, вы можете использовать его служебные классы для стилизации вывода console.log().

Помните, что эти настройки видны только в консоли браузера и не влияют на фактические стили страницы.