Skip to main content

Become A JavaScript Console Expert - #79

Published: November 19, 2021

Estimated Reading Time
2 minutes
Video Duration
27:23 minutes

Tired of the unhelpful console.log? In this tutorial, I show you how to create a better console.log using nothing but vanilla JavaScript. Make your errors or warnings easier to read, make your data cleaner and more concise, and finally organize your code more efficiently with these console.log tweaks.

We go over different console.log display types, how to group your data, how to create tables and so much more. We even show you a way to get rid of console.log altogether with the built-in debugger command.

So, if you are new to JavaScript console.log or you need a refresher, let's make you an expert in less than 30 minutes.

View the source code:

00:00 Intro

00:45 Opening DevTools

02:00 Debugger

03:30 Name + Values

05:17 Console Messages (Log, Info, Error, Warn)

07:13 Errors and Assertions

10:50 Trace

12:25 Grouping

20:11 Putting it all together with Debugger

Become a Patreon to show support and get exclusive access to content:

Applications Used

Visual Studio Code v1.43: .log

Computer Hardware:

Windows 10 Pro: (Amazon)

Samsung 500GB External SSD: (Amazon)

Samsung 970 EVO Plus SSD 1TB - M.2 NVMe: (Amazon)

Rosewill Hive-750S R750W PSU: (Amazon)

Phanteks Eclipse Tempered Glass Case: (Amazon)

MSI Arsenal Gaming AMD Ryzen Motherboard: (Amazon)

MSI Gaming GeForce RTX 2060 Super 8GB: (Amazon)

LG 34UM69G-B 34-Inch 21:9 UltraWide IPS Monitor: (Amazon)

Corsair 64GB (4 x 16GB) DDR4 Memory: (Amazon)

AMD Ryzen 7 2700X Processor: (Amazon)

Dell XPS 15 9500 15.6" Laptop / Windows: (Amazon)

Lenovo ThinkPad T15 15.6" Laptop / Linux: (Amazon)


Fujifilm X-T3: (Amazon)

Fujinon XF18-55mmF2.8-4: (Amazon)


Audio Technica AT2020: (Amazon)

Blue Snowball iCE: (Amazon)


I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to and affiliated sites.