🐞 JavaScript Debugging: A Guide to Finding and Fixing Errors

— You’re about to solve bugs like an FBI agent, my heart —

When you write JavaScript, you meet three types of people:

Those who run the code saying:
“It’s gonna work, I’m sure.”

Those who smash the keyboard screaming:
“WHY ISN’T THIS WORKING?!”

And those who see the error and go:
“Hmmmm… interesting.”, then activate Sherlock mode.

After this article, you’re jumping straight into Category 3.
From now on, when you face a bug, you’ll stay calm…
as if you just spilled coffee on it 😌☕️

🔥 Debugging: But Not the Boring Definition

Debugging is this:

Imagine your code is a house, and the bug is something weird stuck between the couch cushions.
Debugging = “Okay you, WHO ARE YOU AND HOW DID YOU GET HERE?!”

The goal isn’t just to find the error,
but to understand why it exists.

Fixing a bug ≠ fixing the real problem.
Understanding a bug = leveling up your brain 🧠✨

🔍 1. Console.log: The Matchstick of Debugging (But Still Our Bestie)

console.log is immortal.
console.log is life.
Without console.log, a developer’s life is like tea without sugar: possible, but sad.

What you can check with it:

Variable values
How far the function runs
Which logical path was taken
Inputs / outputs
The state of the app

Mini Tip: Use labels

const user = { name: "Cansu", level: 4, mood: "legendary" };
console.log("USER INFO :", user);

More “professional” version:

console.log({ age, username, isLoggedIn });

Seeing clean logs in your console makes you feel like a NASA engineer, baby 🚀

🛑 2. Debugger: The “STOP, WHO ARE YOU?” Moment

Using the keyword debugger is basically telling the police:
“Stop me right here.”

How it works:

When the code hits that line → it freezes.
Then you move step by step.

function calculatePrice(price, tax) {
  debugger;
  const total = price + tax;
  return total;
}

calculatePrice(100, 18);

In DevTools, you’ll see:

Call stack (where the error comes from)
Scope (where variables come from)
Watch expressions (variable evolution in real time)
Step in / out / over (secret agent mode)

Debugger turns you into a CSI Miami detective.
Put on your sunglasses, please 😎🕶️

🧩 3. Breakpoints: The Police Officers of Your Code

Breakpoints tell your code:
“When you reach this line, YOU STOP.”

Advanced types:

Conditional Breakpoint → “Stop when i = 5”
DOM Breakpoint → “Stop if this element changes”
XHR Breakpoint → “Stop when this request is sent”

Example (Conditional Breakpoint):

for (let i = 0; i &lt; 20; i++) {
  console.log("Index :", i);
}

Right-click the line → “Add conditional breakpoint”
Condition: i === 13

Run the code…
BAM!
It stops at 13.
An evil number… but lucky for debugging.

🔄 4. Try…Catch: The Art of Taming Chaos

JavaScript sometimes throws errors that…
leave your screen completely white.
And you’re there like:
“Why are you like this, baby…?”

Try/catch saves your life:

try {
  const data = JSON.parse("{this is not json}");
} catch (err) {
  console.error("Error caught my loooove :", err.message);
}

Mini Tip:
Don’t wrap everything in try/catch.
Only risky areas.
Otherwise finding the source of the error feels like untangling a ball of yarn.

🧠 5. Reading Error Messages Is a Skill (They Don’t Lie)

Being a developer =
50% writing code
50% reading error messages

Most common JS errors:

1. “Unexpected token”

Usually from:

Missing apostrophe
Extra parenthesis
Misplaced comma

const obj = { name: "Cansu" }

2. “Cannot read property of undefined”

Something is undefined →
and you try to access a property on it.

let user = null;
console.log(user.name); // He doesn’t EXIST 😭

3. “ReferenceError”

Using a variable before declaring it.

console.log(a);
let a = 5; // Hoisting slaps you here

🔬 6. Isolate the Problem: Corner the Bug

Searching for a bug in a big project = searching for a ring in a maze.

Effective technique:

Disable blocks one by one
Move suspicious code to a separate file
Test each part alone
Comment out the non-essential
Gradually shrink the crime scene

And then you push the bug against the wall…
and whisper:
“Hey darling, we need to talk.”

🧼 7. Clean Code = Fewer Migraines

Most bugs come from tiny details…
just like past relationships 😂

Golden rules of clean code:

Short functions
One purpose per function
Clear variable names
Not too many if/else
Comments explain → not hide magic tricks

Bad code:

function x(a, b) {
  return a + b * 2 / 5;
}

Good code:

function calculateDiscount(price, rate) {
  const discount = price * rate;
  return price - discount;
}

70% of debugging pain comes from poor naming.
Good names = less suffering ❤️

💂 8. Tools & Extensions: Your Debugging Arsenal

Heroes of VS Code:

Debugger for Chrome
ESLint (kills errors before they’re born)
Prettier (cleans your code & your soul)

Chrome DevTools superpowers:

Network analysis
Performance graphs
Memory leak detection
Event listener inspection

Debugging ≠ just finding errors
Debugging = making your code better.

🎯 CONCLUSION: Debugging Is NOT a Nightmare

I know debugging used to scare you…
But now you’re:

✨ Console.log magician
⚔️ Debugger warrior
🥷 Breakpoint ninja
📜 Error-message translator
⭐ The shining light of the JS universe

Remember:
There are no developers without errors—
only developers who don’t know how to catch them yet.