DEV Community

Chris Held for Headway

Posted on

32 4

Javascript Logging Tips and Tricks

console.log and debugger are probably the most common examples of debugging front end applications. Though log is the most common console function, there are a few others that you can leverage in your application for more descriptive and useful logging. In this post I'm going to cover a few extra functions you may not know about in the console object.

Styled Logging

In addition to console.log, there are a few functions to make your logging more semantic. console.info, console.warn, and console.error can apply some extra styles to your log statements and make your code a little bit more descriptive:

console info, warn, and error example

Assertions

If you need to conditionally log an error, console.assert takes an expression and will log an error if the assertion is false.

console assert example

Tables

If you're logging table data, instead of using console.log(data), consider using console.table(data). console.table optionally accepts a second argument that lets you specify what columns you'd like displayed.

console table example

Custom Styles

Info, warn, and error are a nice way to add some canned styles to your logging statements, but if you're looking for a little more control, console.log accepts a second argument that allows you to style your log statements using CSS:

Custom styled console log

If you'd like to learn more, the full MDN reference is a great resource.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (3)

Collapse
 
kelseyleftwich profile image
Kelsey Leftwich

I've never heard of console.assert. That's neat!

Collapse
 
krishnakakade profile image
krishna kakade

thanks chris 😊👍

Collapse
 
shlomilachmish profile image
shlomi-lachmish

Nice post 👍
console.dir might be useful as well

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay