Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Format and style messages in the Console

Published on

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. format string value

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

SpecifierOutput
%sFormats the value as a string
%i or %dFormats the value as an integer
%fFormats the value as a floating point value
%oFormats the value as an expandable DOM element
%OFormats the value as an expandable JavaScript object
%cApplies CSS style rules to the output string as specified by the second parameter

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. multiple format specifiers

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. format integer values
  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. NaN in console 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 output with CSS
Important

To prevent data leaks and bypasses of security policies, in this format, the url() CSS function supports only the data: URL schema.

For example, you can set a background image in the following way:

background: url(data:image/png;base64,iVBORw…);

Where iVBORw… is a base64-encoded PNG image.

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

Here is a list of color codes supported in DevTools.

ForegroundBackgroundLight themeDark theme
3040
#00000
#00000
3141
#AA0000
#ed4e4c
3242
#00AA00
#01c800
3343
#AA5500
#d2c057
3444
#0000AA
#2774f0
3545
#AA00AA
#a142f4
3646
#00AAAA
#12b5cb
3747
#AAAAAA
#cfd0d0
90100
#555555
#898989
91101
#FF5555
#f28b82
92102
#55FF55
#01c801
93103
#FFFF55
#ddfb55
94104
#5555FF
#669df6
95105
#FF55FF
#d670d6
96106
#55FFFF
#84f0ff
97107
#FFFFFF
#FFFFFF

Here is a list of styling code supported in DevTools.

Parameter(s)Meaning
0Reset all display attributes
1font-weight: bold
2font-weight: lighter
3font-style: italic
4Add underline to text-decoration property
9Add line-through to text-decoration propertyh
22Reset font-weight property
23Reset font-style property
24Remove underline from text-decoration property
29Remove line-through from text-decoration property
38;2;𝑅;𝐺;𝐡color: rgb(𝑅,𝐺,𝐡)
39Reset color property
48;2;𝑅;𝐺;𝐡background: rgb(𝑅,𝐺,𝐡)
49Reset background property
53Add overline to text-decoration property
55Remove overline from text-decoration property

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. Hello World

Updated on β€’ Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.