DEV Community

Cover image for Stop using console.log: Debug Smarter ⚡
Eduardo Calzone
Eduardo Calzone

Posted on

Stop using console.log: Debug Smarter ⚡

#javascript #webdev #programming #tutorial

Are you always hitting console.log like it's the only tool you’ve got?

Sure, it gets the job done—but did you know there are other console tricks that can make debugging way easier (and cooler)? Let’s give your dev life a little upgrade. 😎🛠️

Here’s a breakdown of the most useful console methods:

console.info() ℹ️

Print informational messages that are helpful but less critical.

console.info("Server started successfully");
Enter fullscreen mode Exit fullscreen mode

console.info

console.warn() ⚠️

Show warning messages that alert you to potential issues.

console.warn("⚠️ Deprecated API used");
Enter fullscreen mode Exit fullscreen mode

console.warn

console.error() ❌

Display error messages to highlight failures or bugs.

console.error("❌ Failed to load user data");
Enter fullscreen mode Exit fullscreen mode

console.error

console.debug() 🔍

Print debugging messages (may require enabling verbose mode in some browsers).
Same output as console.log, but with a few differences:

🆚 console.log() vs console.debug()

Feature console.log() 📝 console.debug() 🔍
Purpose General logging Detailed debugging info
Visibility Always visible May be hidden (requires Verbose mode)
Severity level Standard Lower than log, filtered by default
Browser support Visible in all tools Sometimes hidden unless enabled
Use case Track flow, show values Deep inspection during debugging

Use console.debug() for cleaner logs and more control when debugging in depth.

console.assert() ✅

Prints a message only if the given condition is false.

console.assert(age >= 18, "🚫 Age must be 18 or older");
Enter fullscreen mode Exit fullscreen mode

console.assert

console.count() 🔢

Count the number of times this line has been executed with an optional label.

console.count("Button click");
Enter fullscreen mode Exit fullscreen mode

console.count

console.countReset() 🔄

Reset the count for a specific label.

console.countReset("Button click");
Enter fullscreen mode Exit fullscreen mode

console.time() ⏱️

Start a timer with a given label to measure how long an operation takes.

console.time("loadTime");
// code to measure
console.timeEnd("loadTime");
Enter fullscreen mode Exit fullscreen mode

console.time

console.group() 🔗

Start a new console group to organize related messages.

console.group("User Details");
console.log("Name: Nina");
console.log("Age: 28");
console.groupEnd();
Enter fullscreen mode Exit fullscreen mode

console.group

console.table() 📋

Display data as a formatted table for easier reading.

const users = [
  { name: "Nina", age: 28 },
  { name: "Leo", age: 35 },
];
console.table(users);
Enter fullscreen mode Exit fullscreen mode

console.table

console.trace() 📣

Print a stack trace to see the path your code took to reach this point.

function start() {
  stepOne();
}

function stepOne() {
  stepTwo();
}

function stepTwo() {
  console.trace("Trace from stepTwo");
}

start();
Enter fullscreen mode Exit fullscreen mode

console.trace

Did you know console.log can print text with CSS styles? 🎨🖥️

console.log('%cThis text is red and big', 'color: red; font-size: 18px; font-weight: bold;');
Enter fullscreen mode Exit fullscreen mode

console.log
Just add %c before the text, then pass your CSS styles as the second argument.

console.clear() 🧹

Clear all console output.

console.clear();
Enter fullscreen mode Exit fullscreen mode

Happy coding! 🥳

Top comments (0)