Your web browser is out of date. Update your browser for more security, speed and the best experience on this site.

Update your browser
• By Jake Dohm

Five console.log tips and tricks

Here’s the final code including all 5 tips, and one bonus tip!

window.food = ['🌯', '', 'πŸ”', 'πŸ•']
window.todoList = [
  { task: 'Come up with examples', inProgress: false, done: true },
  { task: 'Record Video', inProgress: true, done: false },
  { task: 'Publish video', inProgress: false, done: false },
]

console.log(food)
console.log(todoList)

/* Tip #1: Named console.log */
console.log({ food })

/* Tip #2: console.table */
console.table(todoList)

/* Tip #3: console.warn && console.error */
console.warn('This may be unsafe')
console.error('There was an error processing something')

/* Tip #4: console.count */
for (const item of food) {
  console.count('Loop ran')
}

/* Tip #5: console.assert (πŸ•, 🌯) */
console.assert(food[0] === '🌯', 'First food item is burrito')
console.assert(food[0] === 'πŸ•', 'First food item is pizza')

/* Tip #6: Styling console.log */
console.log(
  '%c Testing custom styles',
  'color:green; font-family: Comic Sans MS; font-size: 30px; line-height: 60px;'
)
View all articles