Formatowanie wiadomości i zmienianie ich stylu w konsoli

Jecelyn Yeen

Ten przewodnik pokazuje, jak formatować i stylizować wiadomości w konsoli Narzędzi deweloperskich w Chrome. Aby dowiedzieć się, jak rejestrować wiadomości w Konsoli, zapoznaj się z artykułem Zaczynamy korzystać z logowania wiadomości.

W tym przewodniku zakładamy, że znasz podstawy tworzenia stron internetowych, np. jak za pomocą JavaScriptu dodać do strony interaktywność.

Formatowanie komunikatów w konsoli

Do formatowania wiadomości konsoli możesz użyć specyfikatorów formatu.

Specyfikacje formatu zaczynają się od znaku procentu (%) i kończą „znakem typu”, który wskazuje typ danych (całkowita, liczba zmiennoprzecinkowa itp.).

Na przykład

  1. Otwórz Konsolę

  2. Wpisz to polecenie konsoli.

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

  3. Powyższe polecenie wyświetla wiadomość Chrome DevTools is awesome.. formatowanie wartości ciągu

Oto lista parametrów formatu, które są obecnie obsługiwane przez narzędzia deweloperskie w Chrome.

Specyfikator Wyniki
%s Sformatuj wartość jako ciąg znaków.
%i lub %d Sformatuj wartość jako liczbę całkowitą.
%f Sformatuj wartość jako wartość zmiennoprzecinkową.
%o Formatuje wartość jako element DOM, który można rozwinąć.
%O Formatuje wartość jako rozwijany obiekt JavaScript.
%c Stosuje do ciągu wyjściowego reguły stylu CSS określone przez drugi parametr

Stosowanie wielu specyfikatorów formatu

W wiadomości możesz użyć więcej niż jednego formatu.

  1. Wpisz to polecenie w konsoli.

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

  2. Powyższe polecenie wyświetla wiadomość The total weight of 3 apples and 2 oranges is 432.4 grams.. wiele wskaźników formatu

Typy konwersji

Komunikat wyjściowy zostanie przekonwertowany zgodnie ze specyfikatorem formatu.

  1. Wpisz to polecenie w konsoli.

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

  2. Powyższe polecenie wyświetla wiadomość I have 2 apples and 3 oranges.. formatuj wartości całkowite

  3. Zamiast rejestrowania wartości 3.5 oranges, wyjściem jest wartość 3 oranges. %d wskazuje, że wartość powinna zostać przekonwertowana na liczbę całkowitą.

Oto przykład tego, co się dzieje, gdy konwersja typu jest nieprawidłowa.

  1. Wpisz to polecenie w konsoli.

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

  2. Powyższe polecenie wyświetla wiadomość Jane has NaN kiwis.. NaN w komunikacie konsoli

  3. %i wskazuje, że wartość powinna/zostanie przekonwertowana na liczbę całkowitą, ale argument jest ciągiem. W ten sposób funkcja zwraca NaN (Not-A-Number).

Stylizowanie komunikatów w konsoli

Istnieją 2 sposoby określania stylu komunikatów w konsoli w Narzędziach deweloperskich.

Styl z określaczem formatu

Aby określić styl wiadomości w konsoli za pomocą CSS, możesz użyć specyfikatora formatu %c.

  1. Wpisz to polecenie w konsoli.

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

  2. Powyższe polecenie powoduje wygenerowanie Hooray ze stylami CSS. stylizowanie danych wyjściowych za pomocą CSS

Styl z sekwencjami ucieczki ANSI

Aby nadać styl wiadomościom w konsoli, możesz użyć sekwencji znaków sterujących ANSI.

Programiści Node.js często kolorują komunikaty logu za pomocą sekwencji ucieczki ANSI, często z pomocą niektórych bibliotek stylu, takich jak chalk, colors, ansi-colors czy kleur.

Możesz jednak nadać wiadomości styl za pomocą sekwencji znaków ucieczki ANSI bez korzystania z żadnych bibliotek. Oto składnia:

\x1B[𝘗1;…;𝘗nm

Gdzie

  • Od 𝘗1 do 𝘗n są prawidłowymi podsekwencjami parametrów SGR (Wybierz odwzorowanie grafiki).
  • Dowolny parametr od 𝘗1 do 𝘗n można pominąć – w takim przypadku przyjmuje się, że jego wartość wynosi zero.
  • \x1B[m to skrót od \x1B[0m, w którym atrybut wyświetlania zostanie zresetowany.

Na przykład

  1. Wpisz to polecenie w konsoli.

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

  2. Powyższe polecenie powoduje wyświetlenie wiadomości Hello z czerwonym tłem, żółtym tekstem i podkreśleniami. Cześć

Oto lista kodów kolorów obsługiwanych w Narzędziach deweloperskich.

Pierwszy plan Tło Jasny motyw Ciemny motyw
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#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

Oto lista kodu stylów obsługiwanego w Narzędziach deweloperskich.

Parametry Znaczenie
0 Zresetuj wszystkie atrybuty wyświetlania
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Dodawanie właściwości underline do usługi text-decoration
9 Dodawanie właściwości line-through do usługi text-decoration
22 Resetuj właściwość font-weight
23 Zresetuj właściwość font-style
24 Usuwanie z usługi text-decoration komponentu underline
29 Usuwanie z usługi text-decoration komponentu line-through
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 Zresetuj color property
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 Zresetuj background property
53 Dodawanie właściwości overline do usługi text-decoration
55 Usuń usługę overline z usługi text-decoration

Oto bardziej skomplikowany przykład z wieloma stylami.

  1. Wpisz to polecenie w konsoli.

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

console.log(hello + space + world);

  2. Powyższe polecenie powoduje wyświetlenie wiadomości Hello World w 3 różnych stylach. Hello World