console - Web APIs

The most frequently-used feature of the console is logging of text and other data. There are several categories of output you can generate, using the console.log() , console.info() , console.warn() , console.error() , or console.debug() methods. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

There are two ways to use each of the output methods; you can pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.

Outputting a single object

The simplest way to use the logging methods is to output a single object:

const someObject = { str : "Some text" , id : 5 } ; console . log ( someObject ) ;

The output looks something like this:

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

Outputting multiple objects

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

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 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:

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:

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.

You may use %c multiple times:

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 and its longhand equivalents

and its longhand equivalents border and its longhand equivalents

and its longhand equivalents border-radius

box-decoration-break

box-shadow

clear and float

and color

cursor

display

font and its longhand equivalents

and its longhand equivalents line-height

margin

outline and its longhand equivalents

and its longhand equivalents padding

text-* properties such as text-transform

properties such as white-space

word-spacing and word-break

and writing-mode