Formatowanie wiadomości i zmienianie ich stylu w konsoli

Jecelyn Yeen

Z tego przewodnika dowiesz się, jak formatować i zmieniać styl wiadomości w konsoli Narzędzi deweloperskich w Chrome. Aby dowiedzieć się, jak rejestrować komunikaty w konsoli, przeczytaj artykuł Pierwsze kroki z wiadomościami Logging.

W tym przewodniku zakładamy, że znasz podstawy tworzenia stron internetowych, np. jak używać JavaScriptu do dodawania interaktywności na stronie.

Formatowanie komunikatów konsoli

Do formatowania komunikatów w konsoli możesz używać specyfikatorów formatu.

Specyfikatory formatu zaczynają się od znaku procenta (%), a kończą znakiem „typu”, który wskazuje typ danych (liczba całkowita, liczba zmiennoprzecinkowa itd.).

Przykład:

  1. Otwórz konsolę
  2. Wpisz to polecenie w konsoli. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. Powyższe polecenie wygeneruje komunikat Chrome DevTools is awesome.. wartość ciągu formatu

Oto lista specyfikatorów formatu, które obecnie obsługują Narzędzia deweloperskie w Chrome.

Specyfikator Wyniki
%s Formatuje wartość jako ciąg znaków
%i lub %d Formatuje wartość jako liczbę całkowitą
%f Formatuje wartość jako wartość zmiennoprzecinkową
%o Formatuje wartość jako rozwijany element DOM
%O Formatuje wartość jako rozwijany obiekt JavaScript
%c Stosuje reguły stylu CSS do ciągu wyjściowego zgodnie z wartością drugiego parametru

Stosowanie wielu specyfikatorów formatu

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

  1. Wpisz to polecenie w konsoli. js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
  2. Powyższe polecenie wygeneruje komunikat The total weight of 3 apples and 2 oranges is 432.4 grams.. wiele specyfikatorów formatu

Konwersje typu

Komunikat wyjściowy zostanie przekonwertowany zgodnie ze specyfikatorem formatu.

  1. Wpisz to polecenie w konsoli. js console.log('I have %i apples and %d oranges.', 2, 3.5);
  2. Powyższe polecenie wygeneruje komunikat I have 2 apples and 3 oranges.. formatuj wartości całkowite
  3. Zamiast logowania 3.5 oranges dane wyjściowe mają postać 3 oranges. Pole %d wskazuje, że wartość powinna/zostanie przekonwertowana na liczbę całkowitą.

Oto przykład, co się dzieje, jeśli typ konwersji jest nieprawidłowy.

  1. Wpisz to polecenie w konsoli. js console.log('Jane has %i kiwis.', 'two');
  2. Powyższe polecenie wygeneruje komunikat Jane has NaN kiwis.. Komunikat NaN w konsoli
  3. Pole %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 (Not-A-Number).

Komunikaty konsoli stylu

W Narzędziach deweloperskich dostępne są 2 sposoby nadawania stylu wiadomości konsoli.

Styl za pomocą specyfikatora formatu

Możesz użyć specyfikatora formatu %c, aby określić styl komunikatów w konsoli za pomocą CSS.

  1. Wpisz to polecenie w konsoli. js 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 tworzy element Hooray z zastosowanymi stylami CSS. stylem wyjściowym za pomocą CSS

Styl z sekwencjami zmiany znaczenia ANSI

Aby określić styl komunikatów konsoli, możesz użyć sekwencji zmiany znaczenia ANSI.

Programiści Node.js często kolorują komunikaty dziennika za pomocą sekwencji zmiany znaczenia ANSI, często za pomocą bibliotek stylów, takich jak kreda, colors, ansi-colors czy kleur.

Możesz jednak dostosować styl wiadomości za pomocą sekwencji zmiany znaczenia ANSI bez używania żadnych bibliotek. Oto składnia:

\x1B[𝘗1;…;𝘗nm

Gdzie

  • Od 𝘗1 do 𝘗n są prawidłowymi podsekwencjami parametrów SGR (Select Graphic Rendition).
  • Możesz pominąć dowolny z parametrów od 𝘗1 do 𝘗n. W takim przypadku przyjmuje się, że jego wartość wynosi 0.
  • \x1B[m to skrót nazwy \x1B[0m, w którym wyświetlany atrybut będzie resetowany.

Przykład:

  1. Wpisz to polecenie w konsoli. js console.log('\x1B[41;93;4mHello\x1B[m');
  2. Powyższe polecenie zwróci wiadomość Hello z czerwonym tłem, żółtym tekstem i podkreśleniem. Cześć

Poniżej znajduje się lista kodów kolorów obsługiwanych w Narzędziach deweloperskich.

Pierwszy plan Wprowadzenie 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 stylu 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 Dodaj underline do usługi text-decoration
9 Dodaj line-through do usługi text-decoration
22 Zresetuj właściwość font-weight
23 Zresetuj właściwość font-style
24 Usuń underline z usługi text-decoration
29 Usuń line-through z usługi text-decoration
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 Zresetuj: color property
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 Zresetuj: background property
53 Dodaj overline do usługi text-decoration
55 Usuń overline z usługi text-decoration

Oto kolejny bardziej skomplikowany przykład z wieloma stylami.

  1. Wpisz następujące polecenie w konsoli. ```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    konsoli.log(hello + spacja + świat); ```

  2. Powyższe polecenie tworzy komunikat Hello World z 3 różnymi stylami. Hello World