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 Logowanie wiadomości – wprowadzenie.

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 komunikatów konsoli możesz użyć specyfikatorów formatu.

Wskaźniki formatu zaczynają się od znaku procentu (%), a kończą na „znaku typu”, który wskazuje typ danych (liczba całkowita, liczba zmiennoprzecinkowa itp.).

Na przykład

  1. Otwórz Konsolę

  2. Wpisz to polecenie w 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 reguły stylu CSS do ciągu wyjściowego zgodnie z drugim parametrem.

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.. formatowanie wartości całkowitych.

  3. Zamiast rejestrowania wartości 3.5 oranges, wyjście to 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. Funkcja %i wskazuje, że wartość powinna/zostanie przekonwertowana na liczbę całkowitą, ale argument jest ciągiem znaków. W związku z tym zwraca wartość NaN (Nie-Liczba).

Stylizowanie komunikatów w konsoli

Stylowanie komunikatów w konsoli w Narzędziach deweloperskich możesz wykonać na 2 sposoby.

Styl z określaczem formatu

Aby nadać styl wiadomościom 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. stylizacja wyjścia 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.

Deweloperzy Node.js często kolorują komunikaty logowania za pomocą sekwencji escape ANSI, często przy użyciu bibliotek stylów takich jak chalk, colors, ansi-colors, kleur.

Możesz jednak nadać wiadomości styl za pomocą sekwencji znaków sterujących ANSI bez używania żadnych bibliotek. Oto składnia:

\x1B[𝘗1;…;𝘗nm

Gdzie

  • 𝘗1 do 𝘗n to prawidłowe podciągi parametrów SGR (Select Graphic Rendition).
  • Parametry 𝘗1–𝘗n można pominąć. W takim przypadku ich wartości są uznawane za równe 0.
  • \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śleniem. 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 Zresetuj 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 Usuwanie z usługi text-decoration komponentu overline

Oto bardziej złożony 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