Back

Stuff you can do with console

Use css styles in console log

console.log('%cI am green', 'color: green')
console.log('%cI am red', 'color: red')
console.log(
  '%cI have a white background with black text',
  'background-color: white; color: black'
)

Display if a condition is false

const isAuthenticated = false
console.assert(isAuthenticated, 'User is not authenticated')

Provide label to what you want to log

const [firstName, lastName] = ['Matthew', 'Shirtliffe']
console.log({ firstName, lastName })

Create a table

const [firstName, middleName, lastName] = ['Matthew', 'Daniel', 'Shirtliffe']
console.table({ firstName, middleName, lastName })

Display an interactive list of properties from an object

const user = {
    name: 'Matthew Shirtliffe',
    role: 'Admin',
    height: 6.3,
    weight: 224,
    hasVerifiedEmail: true,
    lastLogin: new Date('2023-05-30T12:08:09.424+00:00'),
}
console.dir(user)

Track how long an operation takes

const timeLabel = 'timeLabel'
console.time(timeLabel)
setTimeout(() => console.timeEnd(timeLabel), 3000)

Display number of times a call was made

const countLabel = 'doSomething'
function doSomething() {
  console.count(countLabel)
}

doSomething()
doSomething()
doSomething()

console.count(countLabel)
console.countReset(countLabel)