The console is a perfect debug and analytic tool for developers. But the usually used commands are often only console.clear, console.log, console.warn and console.error.

But the console has so many more skills. See here:

The basics

Output multiple values

You can not only output one value. It is possible to output multiple values:

Many useful additional functions

console.assert()

Writes an error message to the console if the assertion is false. If the assertion is true, nothing happens.

console.count()

A practical counter. You can also define several counters by a key. If you do not specify a key, the default counter will be used.

console.countReset()

This allows you to reset the counter.

console.dir()

Displays an interactive list of the properties of the specified JavaScript object.

console.dirxml()

Displays an interactive list of the properties of the specified DOM object.

console.group()

Group the output log files. This group is automatically expanded.

console.groupCollapsed()

Group the output log files. This group is automatically collapsed.

console.groupEnd()

End a group.

console.table()

To output data (objects or array) as a table:

console.time()

Starts a timer. You can optionally specify a key for all three timer functions. This means that several timers can be set at the same time.


console.timeEnd()

Ends the timer and outputs the time.


console.timeLog()

While a timer is running you can use this command to output the time without ending the timer.


console.trace()

If you need the current stack trace, this command helps you.

Formatted output

It is possible to output the log in different colors and formats. There are two different ways:

Native variant

With this variant you can add any color to individual words/areas in the text. Similar to the PS1 under Linux. Here the possible commands:

Option Value
Reset "\x1b[0m"
Bright "\x1b[1m"
Dim "\x1b[2m"
Underscore "\x1b[4m"
Blink "\x1b[5m"
Reverse "\x1b[7m"
Hidden "\x1b[8m"
Foreground Black "\x1b[30m"
Foreground Red "\x1b[31m"
Foreground Green "\x1b[32m"
Foreground Yellow "\x1b[33m"
Foreground Blue "\x1b[34m"
Foreground Magenta "\x1b[35m"
Foreground Cyan "\x1b[36m"
Foreground White "\x1b[37m"
Background Black "\x1b[40m"
Background Red "\x1b[41m"
Background Green "\x1b[42m"
Background Yellow "\x1b[43m"
Background Blue "\x1b[44m"
Background Magenta "\x1b[45m"
Background Cyan "\x1b[46m"
Background White "\x1b[47m"

Here is an example:

CSS like variant

Here you define in which output format it should be formatted and as second parameter you specify the CSS Styling. Here the formats:

Specifier Output
%s Formats the value as a string
%i or %d Formats the value as an integer
%f Formats the value as a floating point value
%o Formats the value as an expandable DOM element. As seen in the Elements panel
%O Formats the value as an expandable JavaScript object
%c Applies CSS style rules to the output string as specified by the second parameter

Here is an example:

Tip: Here is a library for quick implementation:
https://www.npmjs.com/package/colors

Memory data

It is possible to output information about the memory.

Useful Settings

A very helpful setting is to time stamp each log line automatically. You can find it in the chrome under DevTools settings and then in the console area "Show timestamp".

To keep the log output, even after reloading the page, you can persist the log output. The chrome has this setting:

Remote console

console.re - Remote JavaScript Development Console
Für Entwickler ist das Logging sehr wichtig. Und als Webentwickler öffnet man da mal eben die Entwicklertools und man hat alles was man braucht. Aber... ...manchmal ist man aber nicht in einer Umgebung wo man die Entwicklertools zur Verfügung hat. Das kann z.B. auf einem mobile Gerät sein oder ein…