🔧console.tricks you might not know about

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:



And here with console.table:



It's a hell of a difference, isn't it?

Got an DOM-object?

console.dir is your friend.
Here with console.log:



And here with console.dir

Measure times?

Are you tired of subtracting timestamps? Just use console.time & console.timeEnd.

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));
})();