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.

    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 %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.

    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.

    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.

    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.

    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.

    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.

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

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