{str:"Some text", id:5}
    

####  Outputting multiple objects

You can also output multiple objects by listing them when calling the logging
method, like this:

js

    
    
    const car = "Dodge Charger";
    const someObject = { str: "Some text", id: 5 };
    console.info("My first car was a", car, ". The object is:", someObject);
    

The output will look like this:

    
    
    My first car was a Dodge Charger. The object is: {str:"Some text", id:5}
    

####  Using string substitutions

When passing a string to one of the ` console ` object's methods that accepts
a string (such as ` console.log() ` ), you may use these substitution strings:

` %o ` or ` %O `

    

Outputs a JavaScript object. Clicking the object name opens more information
about it in the inspector.

` %d ` or ` %i `

    

Outputs an integer. Number formatting is supported, for example `
console.log("Foo %.2d", 1.1) ` will output the number as two significant
figures with a leading 0: ` Foo 01 ` .

` %s `

    

Outputs a string.

` %f `

    

Outputs a floating-point value. Formatting is supported, for example `
console.log("Foo %.2f", 1.1) ` will output the number to 2 decimal places: `
Foo 1.10 ` .

**Note:** Precision formatting doesn't work in Chrome.

Each of these pulls the next argument after the format string off the
parameter list. For example:

js

    
    
    for (let i = 0; i < 5; i++) {
      console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
    }
    

The output looks like this:

    
    
    Hello, Bob. You've called me 1 times.
    Hello, Bob. You've called me 2 times.
    Hello, Bob. You've called me 3 times.
    Hello, Bob. You've called me 4 times.
    Hello, Bob. You've called me 5 times.
    

####  Styling console output

You can use the ` %c ` directive to apply a CSS style to console output:

js

    
    
    console.log(
      "This is %cMy stylish message",
      "color: yellow; font-style: italic; background-color: blue;padding: 2px",
    );
    

The text before the directive will not be affected, but the text after the
directive will be styled using the CSS declarations in the parameter.

![Styled Text in Firefox console](/en-US/docs/Web/API/console/css-styling.png)

You may use ` %c ` multiple times:

js

    
    
    console.log(
      "Multiple styles: %cred %corange",
      "color: red",
      "color: orange",
      "Additional unformatted message",
    );
    

The properties usable along with the ` %c ` syntax are as follows (at least,
in Firefox â they may differ in other browsers):

  * [ ` background ` ](/en-US/docs/Web/CSS/background) and its longhand equivalents 
  * [ ` border ` ](/en-US/docs/Web/CSS/border) and its longhand equivalents 
  * [ ` border-radius ` ](/en-US/docs/Web/CSS/border-radius)
  * [ ` box-decoration-break ` ](/en-US/docs/Web/CSS/box-decoration-break)
  * [ ` box-shadow ` ](/en-US/docs/Web/CSS/box-shadow)
  * [ ` clear ` ](/en-US/docs/Web/CSS/clear) and [ ` float ` ](/en-US/docs/Web/CSS/float)
  * [ ` color ` ](/en-US/docs/Web/CSS/color)
  * [ ` cursor ` ](/en-US/docs/Web/CSS/cursor)
  * [ ` display ` ](/en-US/docs/Web/CSS/display)
  * [ ` font ` ](/en-US/docs/Web/CSS/font) and its longhand equivalents 
  * [ ` line-height ` ](/en-US/docs/Web/CSS/line-height)
  * [ ` margin ` ](/en-US/docs/Web/CSS/margin)
  * [ ` outline ` ](/en-US/docs/Web/CSS/outline) and its longhand equivalents 
  * [ ` padding ` ](/en-US/docs/Web/CSS/padding)
  * ` text-* ` properties such as [ ` text-transform ` ](/en-US/docs/Web/CSS/text-transform)
  * [ ` white-space ` ](/en-US/docs/Web/CSS/white-space)
  * [ ` word-spacing ` ](/en-US/docs/Web/CSS/word-spacing) and [ ` word-break ` ](/en-US/docs/Web/CSS/word-break)
  * [ ` writing-mode ` ](/en-US/docs/Web/CSS/writing-mode)

**Note:** The console message behaves like an inline element by default. To
see the effects of ` padding ` , ` margin ` , etc. you should set it to for
example ` display: inline-block ` .

###  Using g