🚫 Stop Using console.log() for Debugging! (Do This Instead) 🛑

Have you ever found your code littered with endless console.log() statements like:

• console.log("here")
• console.log("why???")
• console.log("please work 😭")

We’ve all been there! But there’s a smarter, cleaner way to debug. Let’s dive into the magic of Chrome DevTools and other modern debugging tools that work for both JavaScript and Kotlin developers. 🌟

🧑‍💻 Better Debugging Tools to Replace console.log()

1. debugger Statement 🛑

The debugger keyword is a game-changer. Just add it to your code where you suspect something might be off, and the browser will pause right there when you run it in DevTools.
📍 Example:

function calculateTotal(a, b) {
  debugger; // Stops here in DevTools
  return a + b;
}

fun calculateTotal(a: Int, b: Int): Int {
    // In Kotlin, use your IDE's breakpoint or debugger tools here
    return a + b
}

💡 Why It’s Better:

• It gives you access to all variables, the call stack, and the ability to step through your code—no need for guesswork.

2. console.trace() 🔍

Want to find out how your code ended up in a specific function? Use console.trace(). It prints the entire call stack leading up to that point.

📍 Example:

function fetchData() {
  console.trace("Fetch data called");
  // Other code
}

fun fetchData() {
    // Use breakpoints or logging libraries for similar tracing in Kotlin
    println("Trace: Fetch data called")
}

💡 Why It’s Better:

• Shows the exact path of execution, saving you time from adding console.log() in multiple places.

3. console.table() 📊

If you’re working with arrays or objects, make your data readable with console.table().

📍 Example:

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

data class User(val id: Int, val name: String, val role: String)

fun displayUsers() {
    val users = listOf(
        User(1, "Alice", "Admin"),
        User(2, "Bob", "User")
    )
    println(users.joinToString("\n"))
}

💡 Why It’s Better:

• Displays tabular data in a clean, readable format. No more [Object object] mess.

4. Breakpoints in DevTools or IDEs 🚦

Instead of adding debugging code, set breakpoints directly in your IDE (like Android Studio for Kotlin) or in the Chrome DevTools Sources tab for JavaScript.

📍 Steps for Chrome DevTools:

1. Open the Sources tab.
2. Click the line number where you want the code to pause.
3. Refresh your app, and it will pause execution right there.

💡 Why It’s Better:

• No changes to your actual code.
• Lets you inspect variables and step through code directly.

📍 Example in Kotlin (Android Studio):
Set breakpoints in your IDE by clicking on the gutter next to the line number.

5. console.time() & console.timeEnd() 🕒

Need to figure out why something is slow? Use this pair to measure the exact time taken for a block of code to execute.

📍 Example:

console.time("fetchData");
fetchData();
console.timeEnd("fetchData");

fun fetchData() {
    val start = System.currentTimeMillis()
    // Perform some operations
    val end = System.currentTimeMillis()
    println("Time taken: ${end - start}ms")
}

💡 Why It’s Better:

• Great for performance testing without adding extra tools.

🚀 Pro Tips for Debugging

• Always remove logs before pushing to production to avoid exposing sensitive information.
• Use libraries like Timber in Kotlin for structured logging.
• For JS, try advanced debugging tools like Sentry for error tracking.

🤔 What’s Your Favorite Debugging Trick?

Debugging doesn’t have to feel like fighting with your code. 🥊 Try these tools and save yourself the frustration of endless console.log()! Got a favorite tip or trick? Share it in the comments! 📝