console.
Prints values to the browser console. The console object also has warn(), error(), table(), group(), time(), count(), and assert() methods.
- Returns
undefined
Example
#const user = { name: 'Emma', level: 7 }
const badges = ['Start', '7-day streak']
console.log('Welcome,', user.name)
console.log('Level:', user.level, 'Badges:', badges.length)
console.log(user)
console.log(badges)
console.info('Unlocked module 3')
console.warn('2 fuel units left')
console.error('Could not save progress')In the console under the example, the warning and the error have different colors than regular entries. In the browser’s developer tools, objects and arrays can also be expanded.
Definition and usage
#The console.log() method prints any values to the developer tools console: strings, numbers, arrays, objects, or DOM elements. In Chrome you open the console with F12 or the Ctrl+Shift+J shortcut (Cmd+Option+J on a Mac). The method accepts multiple arguments and prints them on a single line, separated by spaces. It’s the simplest way to peek at what’s happening in your program.
The console object has more methods. console.info(), console.warn(), and console.error() work like log(), but mark the message’s severity: warnings are yellow, errors are red, and the tools let you filter by them. console.table() shows an array of objects as a table, and console.group() and console.groupEnd() gather entries into a collapsible group.
Counters and timers come in handy when hunting bugs too: console.count(label) counts how many times a piece of code ran, console.time() and console.timeEnd() measure the time between two points, and console.assert(condition, message) only prints an error when the condition is false.
The browser console shows objects "live": expanding an object shows its current state, not the one from when it was printed. If you need a snapshot, print a copy, e.g. console.log(structuredClone(object)) or JSON.stringify(object).
Syntax
#console.log(value1, value2, …)
console.info(…)
console.warn(…)
console.error(…)
console.table(data)
console.group(label)
console.groupEnd()
console.count(label)
console.time(label)
console.timeEnd(label)
console.assert(condition, message)Parameters
#value1…valueN
any values
The values to print. Several arguments appear on a single line, separated by spaces.data
array or object
Inconsole.table(): the data to show in a table, most often an array of objects.label
optional, string
The label for a group, counter, or timer. Counters and timers without a label use the name"default".condition
any value
Inconsole.assert(): the condition. The message only appears when the condition is false.
More examples
#const ranking = [
{ name: 'Emma', points: 320 },
{ name: 'Jack', points: 280 },
{ name: 'Mia', points: 250 }
]
console.table(ranking)The console on this page prints the data just like console.log(). In the browser’s developer tools you’ll see an actual table with (index), name, and points columns.
console.group('Module 1: HTML')
console.log('Lesson 1: Tags')
console.log('Lesson 2: Attributes')
console.groupEnd()
for (const answer of ['A', 'C', 'A']) {
console.count(answer)
}
console.time('sorting')
Array.from({ length: 10000 }, () => Math.random()).sort()
console.timeEnd('sorting')Module 1: HTML Lesson 1: Tags Lesson 2: Attributes A: 1 C: 1 A: 2 sorting: 3.2109375 ms
The console on this page doesn’t support these methods, so the example doesn’t run. The result shows what Chrome prints: entries from the group are indented and can be collapsed, and the measured time will differ on every run.
function addPoints(user, points) {
console.assert(points > 0, `Invalid number of points: ${points}`)
user.points += points
}
const user = { name: 'Jack', points: 100 }
addPoints(user, 20)
addPoints(user, -5)
console.log(user.points)Assertion failed: Invalid number of points: -5 115
The result comes from Chrome’s console, because the console on this page doesn’t support console.assert(). The method doesn’t stop the program, it only prints an error, so the points were subtracted anyway. When continuing doesn’t make sense, throw an exception with throw instead.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Print variables inside an object:
console.log({ points, level })shows the names together with the values, e.g.{ points: 120, level: 3 }. - View arrays of objects with
console.table(). Comparing many rows in a table is much easier than in collapsed objects. - Remove unnecessary
console.log()calls before publishing a page. A lot of entries slow the page down, and anyone who opens the console can see the printed data.
Related entries
#- JSON.stringify()Converts a JavaScript value, such as an object or array, into a string in JSON format.
- structuredClone()Creates a deep copy of a value, including nested objects, dates, Maps, and Sets.
- Template literalsText templates in backticks: insert values with ${} and span multiple lines.
- ErrorThe built-in error object with a message and a stack trace. The basis for exceptions and custom error classes.
- try...catchCatches errors thrown in the try block and handles them in catch. The optional finally always runs.
Spotted a mistake or missing an example? Write to us.