Formatteer en stijl berichten in de console

Jecelyn Yeen

Deze handleiding laat zien hoe u berichten kunt opmaken en vormgeven in de Chrome DevTools Console . Zie Aan de slag met het loggen van berichten voor informatie over het loggen van berichten in de console.

In deze handleiding wordt ervan uitgegaan dat u de grondbeginselen van webontwikkeling begrijpt, zoals hoe u JavaScript kunt gebruiken om interactiviteit aan een pagina toe te voegen.

Consoleberichten formatteren

U kunt de formaatspecificaties gebruiken om de consoleberichten op te maken.

Formaatspecificaties beginnen met een procentteken (%) en eindigen met een "typeteken" dat het type gegevens aangeeft (geheel getal, float, enz.).

Bijvoorbeeld,

  1. Open de console
  2. Voer de volgende consoleopdracht in. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. De bovenstaande opdracht produceert Chrome DevTools is awesome. bericht. tekenreekswaarde opmaken

Hier is de lijst met formaatspecificaties die Chrome DevTools momenteel ondersteunt.

Specificator Uitvoer
%s Formatteert de waarde als een tekenreeks
%i of %d Formatteert de waarde als een geheel getal
%f Formatteert de waarde als een drijvende-kommawaarde
%o Formatteert de waarde als een uitbreidbaar DOM-element
%O Formatteert de waarde als een uitbreidbaar JavaScript-object
%c Past CSS-stijlregels toe op de uitvoerreeks zoals gespecificeerd door de tweede parameter

Pas meerdere formaatspecificaties toe

U kunt meer dan één formaatspecificatie in een bericht gebruiken.

  1. Voer de volgende consoleopdracht in. js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
  2. Het bovenstaande commando levert op The total weight of 3 apples and 2 oranges is 432.4 grams. bericht. meerdere formaatspecificaties

Begrijp typeconversies

Het uitvoerbericht wordt geconverteerd volgens de formaatspecificatie.

  1. Voer de volgende consoleopdracht in. js console.log('I have %i apples and %d oranges.', 2, 3.5);
  2. Het bovenstaande commando levert op I have 2 apples and 3 oranges. bericht. formatteer gehele waarden
  3. In plaats van 3.5 oranges te loggen, is de output 3 oranges . De %d geeft aan dat de waarde moet/zal worden geconverteerd naar een geheel getal.

Hier is een voorbeeld van wat er gebeurt als de typeconversie ongeldig is.

  1. Voer de volgende consoleopdracht in. js console.log('Jane has %i kiwis.', 'two');
  2. Het bovenstaande commando levert Jane has NaN kiwis. bericht. NaN in consolebericht
  3. De %i geeft aan dat de waarde moet/zal worden geconverteerd naar een geheel getal, maar het argument is een tekenreeks. Het retourneert dus NaN (Not-A-Number) .

Stijlconsoleberichten

Er zijn twee manieren om consoleberichten op te maken in DevTools.

Stijl met formaatspecificatie

U kunt de %c formaatspecificatie gebruiken om de consoleberichten op te maken met CSS.

  1. Voer de volgende consoleopdracht in. js const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
  2. De bovenstaande opdracht produceert Hooray met toegepaste CSS-stijlen. stijluitvoer met CSS

Stijl met ANSI-ontsnappingssequenties

U kunt de ANSI-escape-reeksen gebruiken om consoleberichten op te maken.

Het is gebruikelijk dat Node.js- ontwikkelaars logberichten inkleuren via ANSI-escape-reeksen, vaak met behulp van bepaalde stijlbibliotheken zoals chalk , Colors , ansi-colors , kleur .

Niettemin kunt u het bericht opmaken met ANSI-escape-reeksen zonder gebruik te maken van bibliotheken. Hier is de syntaxis:

\x1B[𝘗1;…;𝘗nm

Waar,

  • 𝘗1 tot 𝘗n zijn geldige subreeksen van SGR-parameters (Select Graphic Rendition) .
  • Elk van de parameters 𝘗1 tot 𝘗n kan worden weggelaten, in welk geval wordt aangenomen dat de waarde nul is.
  • \x1B[m is de afkorting voor \x1B[0m , waarin het weergaveattribuut opnieuw wordt ingesteld.

Bijvoorbeeld,

  1. Voer de volgende consoleopdracht in. js console.log('\x1B[41;93;4mHello\x1B[m');
  2. De bovenstaande opdracht produceert een Hello bericht met een rode achtergrond, gele tekst en onderstreept. Hallo

Hier is een lijst met kleurcodes die worden ondersteund in DevTools.

Voorgrond Achtergrond Licht thema Donker thema
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 is een lijst met stijlcode die wordt ondersteund in DevTools.

Parameter(s) Betekenis
0 Reset alle weergavekenmerken
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Voeg underline toe aan de eigenschap text-decoration
9 Voeg line-through toe aan de eigenschap text-decoration
22 Eigenschap font-weight opnieuw instellen
23 Eigenschap font-style opnieuw instellen
24 Verwijder underline van de eigenschap text-decoration
29 Verwijder line-through uit de eigenschap text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 color property opnieuw instellen
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 background property opnieuw instellen
53 Voeg overline toe aan de eigenschap text-decoration
55 Verwijder overline uit de eigenschap text-decoration

Hier is nog een complexer voorbeeld met meerdere stijlen.

  1. Voer de volgende consoleopdracht in. ```js const hallo = '\x1B[41;93;4mHallo'; const spatie = '\x1B[m '; const wereld = '\x1B[34;102;9mWorld';

    console.log(hallo + spatie + wereld); ```

  2. Het bovenstaande commando produceert een Hello World bericht met 3 verschillende stijlen. Hallo Wereld