Format and style messages in the Console

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.