Format and style messages in the Console

Jecelyn Yeen

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.

Format console messages

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.

Apply multiple format specifiers

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.

Understand type conversions

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

Style console messages

There are two ways to style console messages in DevTools.

Style with format specifier

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.

Style with ANSI escape sequences

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.

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.