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.

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

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.

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.

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.

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.

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.

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

Hier is een lijst met stijlcode die wordt ondersteund in DevTools.

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.

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.

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

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.

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.

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.

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.

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.

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

Hier is een lijst met stijlcode die wordt ondersteund in DevTools.

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.