In diesem Leitfaden erfahren Sie, wie Sie Nachrichten in der Chrome-Entwicklertools-Konsole formatieren und gestalten. Unter Erste Schritte mit Logging von Nachrichten erfahren Sie, wie Sie Nachrichten in der Console protokollieren.
In diesem Leitfaden wird davon ausgegangen, dass Sie die Grundlagen der Webentwicklung beherrschen, z. B. wie Sie einer Seite mithilfe von JavaScript Interaktivität hinzufügen.
Konsolennachrichten formatieren
Sie können die Formatspezifizierer verwenden, um die Konsolennachrichten zu formatieren.
Formatspezifizierer beginnen mit einem Prozentzeichen (%) und enden mit einem Schriftzeichen. der den Typ der Daten angibt (Ganzzahl, Gleitkommazahl usw.).
Beispiel:
- Konsole öffnen
Geben Sie den folgenden Konsolenbefehl ein.
const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
Der obige Befehl erzeugt die
Chrome DevTools is awesome.
-Nachricht.
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, der im zweiten Parameter angegeben ist |
Mehrere Formatspezifizierer anwenden
Sie können in einer Nachricht mehrere Formatspezifizierer verwenden.
Geben Sie den folgenden Konsolenbefehl ein.
console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
Der obige Befehl erzeugt die
The total weight of 3 apples and 2 oranges is 432.4 grams.
-Nachricht.
Typ-Conversions
Die Ausgabenachricht wird entsprechend dem Formatbezeichner konvertiert.
Geben Sie den folgenden Konsolenbefehl ein.
console.log('I have %i apples and %d oranges.', 2, 3.5);
Der obige Befehl erzeugt die
I have 2 apples and 3 oranges.
-Nachricht.Anstatt
3.5 oranges
zu protokollieren, wird3 oranges
ausgegeben.%d
gibt an, dass der Wert in eine Ganzzahl umgewandelt werden soll.
Hier ist ein Beispiel dafür, was passiert, wenn die Typkonvertierung ungültig ist.
Geben Sie den folgenden Konsolenbefehl ein.
console.log('Jane has %i kiwis.', 'two');
Der obige Befehl erzeugt die
Jane has NaN kiwis.
-Nachricht.%i
gibt an, dass der Wert in eine Ganzzahl umgewandelt werden soll. Das Argument ist jedoch ein String. Daher wird NaN (Not-A-Number) zurückgegeben.
Stil für Konsolennachrichten festlegen
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.
Geben Sie den folgenden Konsolenbefehl ein.
const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
Der obige Befehl erzeugt
Hooray
mit angewendeten CSS-Stilen.
Stil mit ANSI-Escapesequenzen
Sie können die ANSI-Escapesequenzen verwenden, um Konsolennachrichten mit Stil zu versehen.
Es ist üblich, dass Node.js Protokollnachrichten über ANSI-Escape-Sequenzen einfärben, oft mithilfe von Stilbibliotheken wie Creide, Farben, ANSI-Farben und Kleur.
Trotzdem können Sie die Nachricht mit ANSI-Escape-Sequenzen gestalten, ohne Bibliotheken zu verwenden. Die Syntax lautet:
\x1B[𝘗1;…;𝘗nm
Dabei gilt:
𝘗1
bis𝘗n
sind gültige Untersequenzen von SGR-Parametern (Select Graphic Rendition).- Die Parameter
𝘗1
bis𝘗n
können weggelassen werden. In diesem Fall wird angenommen, dass der Wert null ist. \x1B[m
ist die Abkürzung für\x1B[0m
, in der das Attribut „display“ zurückgesetzt wird.
Beispiel:
Geben Sie den folgenden Konsolenbefehl ein.
console.log('\x1B[41;93;4mHello\x1B[m');
Der obige Befehl erzeugt eine
Hello
-Nachricht mit rotem Hintergrund, gelbem Text und unterstrichen.
Hier ist 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.
Geben Sie den folgenden Konsolenbefehl ein.
const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld'; console.log(hello + space + world);
Der obige Befehl erzeugt eine
Hello World
-Nachricht mit drei verschiedenen Stilen.