DEV Community

Cover image for Debugging JavaScript Made Super Simple – Easy Tips with Real Code
Meenakshi Agarwal
Meenakshi Agarwal

Posted on

Debugging JavaScript Made Super Simple – Easy Tips with Real Code

#javascript #webdev #beginners #debugging

Hey, are you a beginner in JavaScript?
And your code breaks a lot? It gives error but you don’t know what went wrong?

It’s okay. It happens to all of us.
In this post, I’ll show you how to catch and fix bugs in very easy way using small tools and tricks.

No difficult words. Just real steps and copy-paste code you can use in your own project.

🔧 1. Use console.log() – but smartly

Yes, console.log() is your best friend.
But you need to use it in correct way so you understand what’s really happening.

✅ Good Example 

let username = "meena";
console.log("Username is:", username);
Enter fullscreen mode Exit fullscreen mode

Or even cleaner:

console.log({ username });
Enter fullscreen mode Exit fullscreen mode

That gives you output like:

{ username: "meena" }
Enter fullscreen mode Exit fullscreen mode

You know now what you’re looking at.

❌ Bad Example 

console.log(username);
Enter fullscreen mode Exit fullscreen mode

Now if you have 5 variables, you’ll get confused:
Which one is which?

🎨 Add Color to Logs

You can also use color to highlight logs:

console.log("%cDebug: App Loaded", "color: blue; font-size: 14px;");
Enter fullscreen mode Exit fullscreen mode

Try using red for errors, green for success, yellow for warnings.

🧠 Use When Needed Only

Don’t spam log:

for (let i = 0; i < 10000; i++) {
  console.log(i); // ❌ Too much
}
Enter fullscreen mode Exit fullscreen mode

Do this instead:

if (i % 500 === 0) console.log("i is", i);
Enter fullscreen mode Exit fullscreen mode

🧰 2. Pause Code Using Browser – Watch it Like a Movie

Your browser can pause your code at any line.
You can then see what’s inside each variable at that moment.

🖥 Steps (works in Chrome):

  1. Press Ctrl + Shift + I → DevTools open
  2. Go to Sources tab
  3. Click on your JS file
  4. Click on line number – this sets breakpoint
  5. Refresh page
  6. Code stops there – now hover mouse on any variable

You will see values, one by one.

✅ Add Condition

Right-click on a line → choose “Add conditional breakpoint”

Type:

score > 100
Enter fullscreen mode Exit fullscreen mode

Now it pauses only when score is more than 100.

Super helpful!

🧠 3. Read Error Message (Stack Trace) – It Shows You the Place

When your code crashes, look at the red error in console.
It will show something like:

TypeError: Cannot read property 'name' of undefined  
    at script.js:20:5
Enter fullscreen mode Exit fullscreen mode

What it means:

  • Line 20: Error happened here
  • ‘name’ of undefined: You tried to use .name on something that is undefined

✅ Fix It Like This 

console.log("user is:", user);  
console.log("user.name is:", user?.name);  // optional chaining
Enter fullscreen mode Exit fullscreen mode

Or:

if (!user) {
  console.error("User is missing");
}
Enter fullscreen mode Exit fullscreen mode

Bonus Tool: Assertion 

console.assert(user !== undefined, "User is undefined");
Enter fullscreen mode Exit fullscreen mode

It gives message only when condition fails.

🪛 4. Break Your Big Function into Small Pieces

If your function is too big, it’s hard to find where bug is hiding.
Split it into 2–3 small steps.

👇 Try Like This 

function processOrder(order) {
  console.log("Order received:", order);

  let checked = checkOrder(order);
  console.log("Checked:", checked);

  if (!checked) return;

  let billed = createBill(order);
  console.log("Billed:", billed);
}
Enter fullscreen mode Exit fullscreen mode

If something breaks, you’ll know which step is broken.

That’s called step-by-step debugging.

🔍 5. Always Check Input – Before You Use It

Beginners often forget to check if value is correct before using.

Like, this will crash:

console.log(user.name); // ❌ if user is null
Enter fullscreen mode Exit fullscreen mode

✅ Safe Way: 

if (user && typeof user === "object") {
  console.log("User name:", user.name);
}
Enter fullscreen mode Exit fullscreen mode

Or shorter:

console.log("User name:", user?.name);
Enter fullscreen mode Exit fullscreen mode

🧪 Extra Tools 

typeof age === "number";            // Is it number?
Array.isArray(fruits);              // Is it array?
typeof greet === "function";        // Is it function?
Enter fullscreen mode Exit fullscreen mode

These checks can save hours of head scratching.

📄 Copy-Paste Debug Checklist

✅ Task 💡 How To Do It
Check variable value console.log("age:", age)
Pause code at a line Use DevTools → Sources → Click Line
Stop only if value wrong Right-click → Conditional Breakpoint
Prevent crash on .name Use user?.name or check with if
Is it array? Array.isArray(things)
Add colors to console logs %c message, "color: red"
Use console.assert() console.assert(user, "Missing user")

🧪 Online Tools to Practice

Try your code, logs, and breakpoints here:

🔹 jsfiddle.net
🔹 codesandbox.io
🔹 stackblitz.com

You don’t need to install anything.

💬 Final Words (speak like a human)

Bugs will happen. That’s okay.
But now you know how to look at the bug, follow the signs, and catch it using logs, DevTools, and small tricks.

Use small logs. Watch values. Check inputs. Pause code.
These are your daily tools. Even expert coders use them.

If you found this post helpful, give it a 💖 on Dev.to, and share your debugging trick in comments.

Happy bug hunting 🐞!

Top comments (0)