Форматирование и оформление сообщений в консоли

Джеселин Йен

В этом руководстве показано, как форматировать и стилизовать сообщения в консоли Chrome DevTools . См. раздел «Начало регистрации сообщений», чтобы узнать, как регистрировать сообщения на консоли.

В этом руководстве предполагается, что вы понимаете основы веб-разработки, например, как использовать JavaScript для добавления интерактивности на страницу.

Форматировать сообщения консоли

Вы можете использовать спецификаторы формата для форматирования сообщений консоли.

Спецификаторы формата начинаются с символа процента (%) и заканчиваются «символом типа», указывающим тип данных (целое число, число с плавающей запятой и т. д.).

Например,

  1. Откройте консоль

  2. Введите следующую консольную команду.

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. Приведенная выше команда создает Chrome DevTools is awesome. сообщение. форматирование строкового значения

Вот список спецификаторов формата, которые Chrome DevTools в настоящее время поддерживает.

Спецификатор Выход
%s Форматирует значение как строку
%i или %d Форматирует значение как целое число
%f Форматирует значение как значение с плавающей запятой
%o Форматирует значение как расширяемый элемент DOM.
%O Форматирует значение как расширяемый объект JavaScript.
%c Применяет правила стиля CSS к выходной строке, как указано вторым параметром.

Применить несколько спецификаторов формата

В сообщении можно использовать более одного спецификатора формата.

  1. Введите следующую консольную команду.

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. Приведенная выше команда выдает The total weight of 3 apples and 2 oranges is 432.4 grams. сообщение. несколько спецификаторов формата

Понимание преобразований типов

Выходное сообщение будет преобразовано в соответствии со спецификатором формата.

  1. Введите следующую консольную команду.

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. Приведенная выше команда выдает I have 2 apples and 3 oranges. сообщение. форматировать целочисленные значения

  3. Вместо регистрации 3.5 oranges на выходе получается 3 oranges . %d указывает, что значение должно/будет преобразовано в целое число.

Вот пример того, что произойдет, если преобразование типа недопустимо.

  1. Введите следующую консольную команду.

    console.log('Jane has %i kiwis.', 'two');

  2. Приведенная выше команда выдает Jane has NaN kiwis. сообщение. NaN в сообщении консоли

  3. %i указывает, что значение должно/будет преобразовано в целое число, но аргумент является строкой. Таким образом, он возвращает NaN (Not-A-Number) .

Стиль консольных сообщений

В DevTools существует два способа стилизации консольных сообщений.

Стиль со спецификатором формата

Вы можете использовать спецификатор формата %c для оформления сообщений консоли с помощью CSS.

  1. Введите следующую консольную команду.

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. Приведенная выше команда выдает Hooray с применением стилей CSS. стиль вывода с помощью CSS

Стиль с помощью escape-последовательностей ANSI

Вы можете использовать escape-последовательности ANSI для оформления сообщений консоли.

Разработчики Node.js обычно раскрашивают сообщения журнала с помощью escape-последовательностей ANSI, часто с помощью некоторых библиотек стилей, таких как Chalk , Colors , Ansi-Colors , Kleur .

Тем не менее, вы можете стилизовать сообщение с помощью escape-последовательностей ANSI, не используя никаких библиотек. Вот синтаксис:

\x1B[𝘗1;…;𝘗nm

Где,

  • 𝘗1 до 𝘗n — допустимые подпоследовательности параметров SGR (выбор графического представления) .
  • Любой из параметров от 𝘗1 до 𝘗n можно опустить, и в этом случае его значение предполагается равным нулю.
  • \x1B[m — это сокращение для \x1B[0m , в котором атрибут отображения будет сброшен.

Например,

  1. Введите следующую консольную команду.

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. Приведенная выше команда создает сообщение Hello с красным фоном, желтым текстом и подчеркиванием. Привет

Вот список цветовых кодов, поддерживаемых в DevTools.

передний план Фон Светлая тема Темная тема
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000АА
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00АААА
#12b5cb
37 47
#АААААА
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

Вот список кода стилей, поддерживаемого в DevTools.

Параметр(ы) Значение
0 Сбросить все атрибуты отображения
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Добавить underline к свойству text-decoration
9 Добавить line-through в свойство text-decoration
22 Сбросить свойство font-weight
23 Сбросить свойство font-style
24 Удалить underline из свойства text-decoration
29 Удалить line-through из свойства text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 Сбросить color property
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 Сбросить background property
53 Добавить overline к свойству text-decoration
55 Удалить overline из свойства text-decoration

Вот еще один более сложный пример с несколькими стилями.

  1. Введите следующую консольную команду.

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. Приведенная выше команда создает сообщение Hello World в трех разных стилях. Привет, мир