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

Update your browser

May 22, 2020 β€’ 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;'
)
    
  
An illustration of physically building a Craft CMS website with blocks

Further Reading

Feb 01, 2019 β€’ By Garrett Winder

Building modular websites with Craft CMS

We were recently scoping out a website redesign project in Craft CMS with one of our design agency partners. By no means was it a large website, but after going down the traditional route of defining the different templates that would need to be designed and developed we realized we needed to go back to the drawing board to stay within the client's…

Don’t let chaotic web projects get you down.

Get a web project — and a development process — that wows.

Sign up for our newsletter.

We send a few emails every month with helpful articles and resources for people who make and manage websites.