As a JavaScript developer, you've probably used console.log countless times for debugging. While it’s quick and easy, JavaScript offers a rich set of console methods that can make your debugging more efficient, organized, and visually clear. Let’s dive into these alternatives, explore when and why to use them, and see the outputs they provide! 🎉👩‍💻👨‍💻

Why Move Beyond console.log? 🤔💡

Using console.log for everything can lead to messy debugging and unclear outputs, especially in complex applications. By leveraging more specialized console methods, you can:

• 🌟 Highlight critical information.
• 📚 Organize related logs.
• 👀 Visualize data in a clearer format.

Here are some of the best alternatives, complete with examples and results. 🚀

1️⃣ console.info() 📢✨

• When to use: For informational messages that aren’t warnings or errors.
• Result: Displays the message with an “info” style (e.g., blue text in some browsers).

console.info("Data loaded successfully! 🚀");

Output:

ℹ️ Data loaded successfully! 🚀

2️⃣ console.warn() ⚠️💡

• When to use: To highlight potential issues that don’t require immediate action.
• Result: Displays a warning styled with a yellow background or icon in most browsers.

console.warn("This feature is deprecated and will be removed in the next release. ⚠️");

Output:

⚠️ This feature is deprecated and will be removed in the next release. ⚠️

3️⃣ console.error() ❌🔥

• When to use: For logging critical errors that need immediate attention.
• Result: Displays an error styled with a red background or icon.

console.error("Failed to fetch data from the API. ❌");

Output:

❌ Failed to fetch data from the API. ❌

4️⃣ console.table() 📋🗂️

• When to use: For displaying tabular data (arrays or objects) in an easy-to-read table format.
• Result: Renders a table in the console with rows and columns.

const users = [
  { id: 1, name: "Alice", role: "Admin" },
  { id: 2, name: "Bob", role: "User" },
];
console.table(users);

Output:

5️⃣ console.dir() 🛠️🔍

• When to use: To inspect JavaScript objects or DOM elements.
• Result: Displays an expandable tree structure.

const element = document.querySelector("#app");
console.dir(element);

Output:

An expandable tree of properties and methods for the DOM element, such as:

#app  
  ├── children  
  ├── innerHTML  
  ├── classList  
  └── ...  

6️⃣ console.group() / console.groupEnd() 📂🎯

• When to use: To group related logs together for better organization.
• Result: Groups the logs in an expandable/collapsible format.

console.group("User Details 🧑‍💻");
console.log("Name: Alice");
console.log("Age: 25");
console.log("Role: Admin");
console.groupEnd();

Output:

▶️ User Details 🧑‍💻

• Name: Alice
• Age: 25
• Role: Admin

7️⃣ console.time() / console.timeEnd() ⏱️⚡

• When to use: To measure the execution time of code blocks.
• Result: Displays the time taken in milliseconds.

console.time("API Fetch ⏱️");
setTimeout(() => {
  console.timeEnd("API Fetch ⏱️");
}, 2000);

Output:

API Fetch ⏱️: 2002.34 ms

8️⃣ debugger 🐞🔧

• When to use: To pause code execution and inspect variables interactively.
• Result: Opens the browser’s debugger tool and pauses code execution.

const data = fetchData();
debugger; // Opens the browser's debugger tool.
processData(data);

Output:

Execution pauses, allowing you to step through the code in your browser’s developer tools.

9️⃣ alert() for Critical Messages 🔔🚨

• When to use: To notify users of important updates during development.
• Result: Displays a pop-up alert message.

alert("Critical error occurred! 🔔");

Output:

A browser pop-up with:

Critical error occurred! 🔔

Wrapping It All Up 🎉🎯

While console.log is a reliable go-to tool, these alternatives can make your debugging process more effective and insightful. By choosing the right method for the right task, you’ll:

• 💾 Save time during debugging.
• 📚 Keep your logs organized.
• 🤝 Improve collaboration with your team.

Next time you’re debugging or logging, try out one of these methods! Which one is your favorite ? Let me know in the comments! 🚀🎊

Happy coding 💻

Thanks for reading!

Made with 💙 by Hadil Ben Abdallah.

GitHub LinkedIn CodePen Daily.dev