Nachrichten in der Console formatieren und gestalten

Jecelyn Yeen
Jecelyn Yeen
Twitter GitHub Startseite

In diesem Leitfaden erfahren Sie, wie Sie Nachrichten in der Chrome-Entwicklertools-Konsole formatieren und gestalten. Unter Erste Schritte mit dem Logging von Nachrichten erfahren Sie, wie Sie Nachrichten in der Console protokollieren.

In diesem Leitfaden wird davon ausgegangen, dass Sie mit den Grundlagen der Webentwicklung vertraut sind, z. B. wie Sie JavaScript verwenden, um einer Seite interaktive Elemente hinzuzufügen.

Konsolennachrichten formatieren

Sie können die Formatspezifizierer verwenden, um die Konsolennachrichten zu formatieren.

Formatspezifizierer beginnen mit einem Prozentzeichen (%) und enden mit einem „Typzeichen“, das den Typ der Daten angibt (Ganzzahl, Gleitkommazahl usw.).

Beispiel:

  1. Konsole öffnen
  2. Geben Sie den folgenden Konsolenbefehl ein: js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. Der obige Befehl erzeugt eine Chrome DevTools is awesome.-Nachricht. Stringwert formatieren

Hier finden Sie eine Liste der Formatspezifizierer, die derzeit von den Chrome-Entwicklertools unterstützt werden.

Spezifizierer Ausgabe
%s Formatiert den Wert als String
%i oder %d Formatiert den Wert als Ganzzahl
%f Formatiert den Wert als Gleitkommawert
%o Formatiert den Wert als maximierbares DOM-Element
%O Formatiert den Wert als maximierbares JavaScript-Objekt
%c Wendet CSS-Stilregeln auf den Ausgabestring an, wie im zweiten Parameter angegeben.

Mehrere Formatspezifizierer anwenden

Sie können in einer Nachricht mehrere Formatspezifizierer verwenden.

  1. Geben Sie den folgenden Konsolenbefehl ein: js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
  2. Der obige Befehl erzeugt eine The total weight of 3 apples and 2 oranges is 432.4 grams.-Nachricht. mehrere Formatspezifizierer

Typ-Conversions

Die Ausgabenachricht wird entsprechend dem Formatspezifizierer konvertiert.

  1. Geben Sie den folgenden Konsolenbefehl ein: js console.log('I have %i apples and %d oranges.', 2, 3.5);
  2. Der obige Befehl erzeugt eine I have 2 apples and 3 oranges.-Nachricht. Ganzzahlwerte formatieren
  3. Anstatt 3.5 oranges zu protokollieren, lautet die Ausgabe 3 oranges. %d gibt an, dass der Wert in eine Ganzzahl umgewandelt werden soll/wird.

Hier ein Beispiel dafür, was passiert, wenn die Typkonvertierung ungültig ist.

  1. Geben Sie den folgenden Konsolenbefehl ein: js console.log('Jane has %i kiwis.', 'two');
  2. Der obige Befehl erzeugt eine Jane has NaN kiwis.-Nachricht. NaN in der Konsolennachricht
  3. %i gibt an, dass der Wert in eine Ganzzahl umgewandelt werden soll/wird, aber das Argument ist ein String. Daher wird NaN (Not-A-Number) zurückgegeben.

Stil für Konsolennachrichten

Es gibt zwei Möglichkeiten, Konsolennachrichten in den Entwicklertools zu gestalten.

Stil mit Formatspezifizierer

Sie können den Formatspezifizierer %c verwenden, um die Konsolennachrichten mit CSS zu gestalten.

  1. Geben Sie den folgenden Konsolenbefehl ein: js const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
  2. Der obige Befehl erzeugt Hooray mit angewendeten CSS-Stilen. Stilausgabe mit CSS

Stil mit ANSI-Escape-Sequenzen

Sie können die ANSI-Escapesequenzen verwenden, um Konsolennachrichten zu gestalten.

Node.js-Entwickler färben Lognachrichten üblicherweise über ANSI-Escapesequenzen ein, oft mithilfe von Stilbibliotheken wie chalk, colors, ansi-colors und kleur.

Trotzdem können Sie die Nachricht mit ANSI-Escape-Sequenzen gestalten, ohne Bibliotheken zu verwenden. Die Syntax lautet wie folgt:

\x1B[𝘗1;…;𝘗nm

Dabei gilt:

  • 𝘗1 bis 𝘗n sind gültige Untersequenzen von SGR (Select Graphic Rendition)-Parametern.
  • Jeder der Parameter 𝘗1 bis 𝘗n kann weggelassen werden. In diesem Fall wird der Wert null angenommen.
  • \x1B[m ist die Kurzschreibweise für \x1B[0m, in der das Anzeigeattribut zurückgesetzt wird.

Beispiel:

  1. Geben Sie den folgenden Konsolenbefehl ein: js console.log('\x1B[41;93;4mHello\x1B[m');
  2. Der obige Befehl erzeugt eine Hello-Nachricht mit rotem Hintergrund, gelbem Text und unterstrichenen Text. Hallo

Im Folgenden finden Sie eine Liste der in den Entwicklertools unterstützten Farbcodes.

Vordergrund Hintergrund Helles Design Dunkles Design
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

Hier ist eine Liste der Stilcodes, die in den Entwicklertools unterstützt werden.

Parameter Bedeutung
0 Alle Anzeigeattribute zurücksetzen
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 underline zur Property „text-decoration“ hinzufügen
9 line-through zur Property „text-decoration“ hinzufügen
22 font-weight-Property zurücksetzen
23 font-style-Property zurücksetzen
24 underline aus text-decoration-Property entfernen
29 line-through aus text-decoration-Property entfernen
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 color property zurücksetzen
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 background property zurücksetzen
53 overline zur Property „text-decoration“ hinzufügen
55 overline aus text-decoration-Property entfernen

Hier ist ein weiteres komplexeres Beispiel mit mehreren Stilen.

  1. Geben Sie den folgenden Konsolenbefehl ein. ```js const hello = '\x1B[41;93;4mHello'; const Leerzeichen = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(hello + Leerzeichen + world); ```

  2. Der obige Befehl erzeugt eine Hello World-Meldung mit drei verschiedenen Stilen. Hello World