How to Debug Your Code Using Console Logs in JavaScript

If you’ve ever written a JavaScript program that didn’t behave the way you expected (and let’s be honest, who hasn’t?), then you know how important debugging is. While there are many advanced tools available for debugging, one of the simplest yet most powerful methods is using console.log().

In this guide, we’ll break down how to debug your JavaScript code using console logs, explore practical examples, and share a few pro tips to make your debugging process faster and smarter.

What Is console.log()?

The console.log() method is a built-in JavaScript function that outputs messages to your browser’s developer console. Think of it as a way to “peek inside” your code while it runs — you can print variable values, check conditions, or track the flow of execution.

It’s simple, lightweight, and works everywhere — whether you’re writing client-side code in a browser or running scripts with Node.js.

Example:

let name = "Ajoy";
console.log("The user name is:", name);

When you open the browser console (usually by pressing F12 or Ctrl + Shift + I → Console tab), you’ll see:

The user name is: Ajoy

Why Use Console Logs for Debugging?

Before diving into the how, let’s look at why console logging is useful:

Helps trace variable values at different points in your code.
Shows the flow of logic (great for loops, conditions, and functions).
Quickly identifies where the code stops working.
No setup needed — it’s built right into JavaScript.

It’s like leaving breadcrumbs through your code, helping you follow what’s happening step by step.

Step 1: Open the Console

First, open your browser’s Developer Tools.

In Google Chrome or Edge → press Ctrl + Shift + I (or Cmd + Option + I on Mac).
Click the Console tab.
You’ll now see an interactive window where you can type JavaScript commands or view log messages.

Try this:

console.log("Hello from JavaScript!");

If you see the message appear in the console, you’re ready to debug.

Step 2: Log Variables and Outputs

When debugging, you often want to know what a variable contains at a specific point.

Example:

let x = 10;
let y = 5;
let result = x * y;

console.log("x:", x);
console.log("y:", y);
console.log("Result:", result);

You’ll see:

x: 10
y: 5
Result: 50

By logging values like this, you can spot where unexpected data might be causing bugs.

Step 3: Track Code Execution Flow

Sometimes, you need to figure out which parts of your code are running — especially when dealing with conditions or loops.

Example:

for (let i = 0; i < 3; i++) {
    console.log("Loop iteration:", i);
}

Output:

Loop iteration: 0
Loop iteration: 1
Loop iteration: 2

This helps confirm that your loop is executing the right number of times — and in the right order.

You can even track conditional logic:

let isLoggedIn = false;

if (isLoggedIn) {
    console.log("User is logged in.");
} else {
    console.log("User is not logged in.");
}

Step 4: Use Different Console Methods

console.log() isn’t the only tool you’ve got. The console object includes several other helpful methods:

console.warn() → Displays a yellow warning message.
console.error() → Displays a red error message (useful for catching issues).
console.table() → Displays data in a clean table format.

Example:

let users = [
  { name: "Ajoy", age: 27 },
  { name: "Maria", age: 25 },
];

console.table(users);

Output: A neat table showing names and ages in the console — perfect for visualizing structured data.

Step 5: Debugging with Context

When debugging complex apps, include context in your logs to make them easier to read later.

Example:

function calculateArea(width, height) {
    console.log("[calculateArea] width:", width, "height:", height);
    return width * height;
}

let area = calculateArea(10, 5);
console.log("Total area:", area);

Prefixing logs with tags like [functionName] helps organize your output when debugging multiple functions at once.

Step 6: Remove or Disable Logs Before Deployment

Once your issue is fixed, don’t forget to remove unnecessary logs. Leaving console.log() statements in production code can:

Slow down performance.
Reveal internal data to users.
Clutter the console for future debugging.

You can comment them out or use tools like Babel plugins or Webpack to strip them automatically.

Bonus Tip: Use console.group() for Organized Logs

You can organize related logs using groups:

console.group("User Info");
console.log("Name: Ajoy");
console.log("Age: 27");
console.groupEnd();

All related logs will appear together in a collapsible group — neat and tidy!

Wrapping Up

Using console logs is one of the easiest and most effective ways to debug your JavaScript code. They help you understand what’s going on under the hood and make finding issues much simpler — especially when you’re just starting out.

As you get more comfortable, you can move on to browser breakpoints, source maps, and debugging tools built into VS Code or Chrome DevTools. But remember — even the pros still use console.log() for a quick sanity check!

So next time your code acts up, open that console, drop in a few logs, and follow the trail — your bug’s hiding in there somewhere.