🔧console.tricks you might not know about

<p dir="auto"><strong>Many webdevelopers still debug with <code>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... <h2>Got an array of objects? <p dir="auto">Check out <code>console.table.<br /> Here you can see what it looks like with <code>console.log:<br /> <img src="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.log-1-output.PNG" alt="console.log(authors)" srcset="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.log-1-output.PNG 1x, https://images.hive.blog/1536x0/https://stuff.flovolution.com/blog/console.log-1-output.PNG 2x" /><br /> <br /><br /> And here with <code>console.table:<br /> <img src="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.table-output.PNG" alt="console.table(authors)" srcset="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.table-output.PNG 1x, https://images.hive.blog/1536x0/https://stuff.flovolution.com/blog/console.table-output.PNG 2x" /><br /> <br /><br /> It's a hell of a difference, isn't it? <h2>Got an DOM-object? <p dir="auto"><code>console.dir is your friend.<br /> Here with <code>console.log:<br /> <img src="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.log-2-output.PNG" alt="console.log(authors)" srcset="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.log-2-output.PNG 1x, https://images.hive.blog/1536x0/https://stuff.flovolution.com/blog/console.log-2-output.PNG 2x" /><br /> <br /><br /> And here with <code>console.dir<br /> <img src="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.dir-output.PNG" alt="console.log(authors)" srcset="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.dir-output.PNG 1x, https://images.hive.blog/1536x0/https://stuff.flovolution.com/blog/console.dir-output.PNG 2x" /><br /> <br /> <h2>Measure times? <p dir="auto">Are you tired of subtracting timestamps? Just use <code>console.time & <code>console.timeEnd.<br /> <img src="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.time-output.PNG" alt="console.log(authors)" srcset="https://images.hive.blog/768x0/https://stuff.flovolution.com/blog/console.time-output.PNG 1x, https://images.hive.blog/1536x0/https://stuff.flovolution.com/blog/console.time-output.PNG 2x" /> <h2>Upcoming? <p dir="auto">What do you want to see next? <ul> <li>How to Pi-Hole <li>PWA #3 <li>something different <p dir="auto">Let me know in the comments below. <hr /> <p dir="auto">With that in mind, happy coding. <pre><code>(() => { 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)); })();