Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.chrome.com/docs/devtools/console/format-style below:

Format and style messages in the Console | Chrome DevTools

Stay organized with collections Save and categorize content based on your preferences.

This guide shows you how to format and style messages in the Chrome DevTools Console. See Get Started With Logging Messages to learn how to log messages to the Console.

This guide assumes that you understand the fundamentals of web development, such as how to use JavaScript to add interactivity to a page.

You can use the format specifiers to format the console messages.

Format specifiers begin with a percent character (%) and terminate with a "type character" which indicates the type of data (integer, float, etc.).

For example,

1. Open the Console

2. Enter the following console command.

   const tools = 'Chrome DevTools';
   console.warn('%s is awesome.', tools);
   

3. The command above produces Chrome DevTools is awesome. message.

Here is the list of format specifiers Chrome DevTools support currently.

You can use more than one format specifier in a message.

1. Enter the following console command.

   console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
   

2. The command above produces The total weight of 3 apples and 2 oranges is 432.4 grams. message.

The output message will be converted according to the format specifier.

1. Enter the following console command.

   console.log('I have %i apples and %d oranges.', 2, 3.5); 
   

2. The command above produces I have 2 apples and 3 oranges. message.

3. Instead of logging 3.5 oranges, the output is 3 oranges. The %d indicates that the value should/will be converted to an integer.

Here is an example of what happens if the type conversion is invalid.

1. Enter the following console command.

   console.log('Jane has %i kiwis.', 'two');
   

2. The command above produces Jane has NaN kiwis. message.

3. The %i indicates that the value should/will be converted to an integer, but the argument is a string. Thus it returns NaN (Not-A-Number).

There are two ways to style console messages in DevTools.

You can use the %c format specifier to style the console messages with CSS.

1. Enter the following console command.

   const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
   console.log("%cHooray", style);
   

2. The command above produces Hooray with CSS styles applied.

You can use the ANSI escape sequences to style console messages.

It is common for Node.js developers to colorize log messages via ANSI escape sequences, often with the help of some styling libraries like chalk, colors, ansi-colors, kleur.

Nevertheless, you can style the message with ANSI escape sequences without using any libraries. Here is the syntax:

\x1B[𝘗1;…;𝘗nm

Where,

• 𝘗1 to 𝘗n are valid subsequences of SGR (Select Graphic Rendition) parameters.
• Any of the parameters 𝘗1 to 𝘗n can be omitted, in which case its value is assumed to be zero.
• \x1B[m is the shorthand for \x1B[0m, in which the display attribute will be reset.

For example,

1. Enter the following console command.

   console.log('\x1B[41;93;4mHello\x1B[m');
   

2. The command above produces a Hello message with red background, yellow text and underlined.

Here is a list of color codes supported in DevTools.

#00000

#00000

#AA0000

#ed4e4c

#00AA00

#01c800

#AA5500

#d2c057

#0000AA

#2774f0

#AA00AA

#a142f4

#00AAAA

#12b5cb

#AAAAAA

#cfd0d0

#555555

#898989

#FF5555

#f28b82

#55FF55

#01c801

#FFFF55

#ddfb55

#5555FF

#669df6

#FF55FF

#d670d6

#55FFFF

#84f0ff

#FFFFFF

#FFFFFF

Here is a list of styling code supported in DevTools.

Here is another more complex example with multiple stylings.

1. Enter the following console command.

   const hello = '\x1B[41;93;4mHello';
   const space = '\x1B[m ';
   const world = '\x1B[34;102;9mWorld';
   
   console.log(hello + space + world);
   

2. The command above produces a Hello World message with 3 differnt styles.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2021-02-21 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2021-02-21 UTC."],[],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4