How to Debug JavaScript with Chrome DevTools

Meet Every Developer's Frenemy — Bugs

Hello, fellow code warriors! Ever written code that seemed perfect, but when opened in the browser… suddenly a button doesn’t work, an animation freezes, or an API call just refuses to respond?

Yup. Welcome to the buggy side of programming.

Don’t worry, you’re not alone. Every developer faces this. And if you’ve been relying only on console.log() to track down issues, maybe it’s time to level up.

Because you’ve got a super powerful and totally free tool at your fingertips: Chrome DevTools.

In this article, we’ll explore:

• What is Chrome DevTools?
• Its key features for debugging JavaScript
• Step-by-step how to track bugs
• Tips and tricks to make debugging smooth

 

What Is Chrome DevTools?

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. With DevTools, you can:

• Inspect HTML & CSS in real-time
• Monitor API/network calls
• Track memory usage and performance
• And of course: debug JavaScript like a boss

To open DevTools:

• Press F12 or
• Right-click on a webpage > Inspect

Voila! You now have access to tools that most developers barely scratch the surface of.

 

Why Not Just Use console.log()?

console.log() is like putting duct tape on a broken machine. It might help, but it’s not fixing anything.

Why it’s limited:

• You manually add/remove it constantly
• Sometimes you forget to remove it (and ship it to production)
• You can’t track code execution visually
• You can’t pause and inspect variable states mid-run

That’s why real-time debugging with DevTools gives you x-ray vision into your code’s brain.

 

Main DevTools Features for JavaScript Debugging

Let’s focus on the Sources tab — your JavaScript debugging HQ.

1. Breakpoints

A breakpoint tells the browser: “Pause here when you get to this line.”

How to use:

• Open the Sources tab
• Find the JS file you want
• Click the line number where you want to pause

2. Step Over / Step Into / Step Out

When paused, you can step through code:

• Step Over: Run the current line (skip going into functions)
• Step Into: Go inside the function being called
• Step Out: Exit the current function

This is awesome for tracing through complex logic.

3. Watch Expressions

Add variables or expressions to the Watch panel — e.g., user.name or cart.length. DevTools keeps evaluating them live during execution.

4. Call Stack

See which function called what — a breadcrumb trail of execution. Great for tracing back to where things went wrong.

5. Scope Variables

Inspect variables in Local, Closure, and Global scopes while paused at a breakpoint. Know exactly what data is available.

6. Conditional Breakpoints

Want to pause only when i === 5? Right-click the line number > Add conditional breakpoint > Enter the condition.

 

Debugging Walkthrough with DevTools

Sample Code:

function calculateDiscount(price, discount) {
  let result = price - price * discount;
  return result.toFixed(2);
}

let finalPrice = calculateDiscount(100, '10%'); // bug!
console.log('Final price:', finalPrice);

Step-by-Step:

1. Open DevTools (F12)
2. Go to the Sources tab
3. Open the JS file and set a breakpoint inside the calculateDiscount function
4. Reload the page
5. DevTools pauses at the breakpoint
6. Check the value of discount — it’s '10%', not a number!
7. Fix it:

   discount = parseFloat(discount) / 100;

8. Reload and confirm it's working 

 

DevTools Debugging Tips

• Use console.table() to view arrays of objects in a clean format
• Turn on “Preserve log” to keep logs even after page reloads
• Use the Network tab to inspect API responses and headers
• Use “Pause on Exception” to catch unexpected errors
• Remove breakpoints after debugging to clean up

 

Bonus Tools Inside DevTools

•  Network Throttling: Simulate slow connections
•  Performance tab: Check FPS, memory leaks, UI bottlenecks
•  Lighthouse: Analyze performance, SEO, and accessibility

 

Debugging Is a Detective Game

Many people think debugging is painful. But with DevTools, it’s actually fun. You become a digital detective solving mysteries line by line.

Stop guessing with console.log() — use DevTools to:

• Pause the browser
• Examine code behavior step by step
• Track what really happens during execution

And the best part? It’s already in your browser. No downloads. No setup.