🔧console.tricks you might not know about

banner

Many webdevelopers still debug with console.log. But there are more cool features you may not know about. To be clear: I would not recommend debugging with those, but sometimes...

Got an array of objects?

Check out console.table. Here you can see what it looks like with console.log: console.log(authors)
And here with console.table: console.table(authors)
It's a hell of a difference, isn't it?

Got an DOM-object?

console.dir is your friend. Here with console.log: console.log(authors)
And here with console.dir

Measure times?

Are you tired of subtracting timestamps? Just use console.time & console.timeEnd. console.log(authors)

Upcoming?

What do you want to see next? * How to Pi-Hole * PWA #3 * something different

Let me know in the comments below.

With that in mind, happy coding.

(() => {
  const colors = [
    '001f3f', '0074d9', '7fdbff', '39cccc',
    '3d9970', '2ecc40', '01ff70', 'ffdc00',
    'ff851b', 'ff4136', '85144b', 'f012be',
  ];
  const contents = ['%cI', '%c❤', '%cweb', '%cdev'];
  const options = Array.from(
    new Array(contents.length),
    () => `
      color:#${colors[Math.floor(Math.random() * colors.length)]};
      font-size:64px;
    `
  );
  console.log.apply(console, [contents.join('')].concat(options));
})();