DEV Community

Cover image for JavaScript Debugging: Tricks for Faster Fixes
Ramkumar M N
Ramkumar M N

Posted on

JavaScript Debugging: Tricks for Faster Fixes

#javascript #programming #beginners #coding

Debugging JavaScript can be frustrating, but with the right tricks, you can spot and fix issues much faster. Here are some lesser-known debugging techniques to save you time.

1. Use console.table() for Better Object & Array Visualization

Instead of using console.log(), try:

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
console.table(users);
Enter fullscreen mode Exit fullscreen mode

This prints a nicely formatted table in the console, making it easier to analyze data.

2. Debug with debugger; Statement

Manually setting breakpoints in DevTools is slow. Instead, insert debugger; in your code:

function test() {
  let x = 10;
  debugger;
  console.log(x);
}
test();
Enter fullscreen mode Exit fullscreen mode

When this line runs, execution pauses automatically in the browser's DevTools.

3. Find Where a Function Was Called Using console.trace()

If you’re unsure where a function is being called from, use:

function myFunction() {
  console.trace("Function call trace:");
}
myFunction();
Enter fullscreen mode Exit fullscreen mode

This prints the function’s call stack in the console, helping you track its origin.

4. Log Multiple Values Easily with Object Shorthand

Instead of logging variables separately:

console.log("user:", user, "age:", age);
Enter fullscreen mode Exit fullscreen mode

Use object shorthand:

console.log({ user, age });
Enter fullscreen mode Exit fullscreen mode

This prints an easy-to-read object in the console.

5. Monitor Variable Changes in DevTools

Right-click a variable in DevTools and select "Add to Watch" to track its value live as the script runs.

6. Stop Infinite Loops with Chrome’s Breakpoint Trick

If your script gets stuck in an infinite loop, press F12 (DevTools) → Sources tab → Right-click the line → Breakpoint. The next time it executes, the loop pauses, and you can inspect what’s wrong.

7. Edit and Run JavaScript Directly in DevTools

Did you know you can modify JavaScript inside DevTools without reloading the page?

  • Open DevTools → Sources tab
  • Locate your script
  • Edit the code
  • Press Ctrl + S to save and test instantly

8. Filter Console Logs Like a Pro

Too many logs cluttering your console? Use filters:

  • Errors only → Type error in the filter bar
  • Warnings only → Type warn
  • Logs from a specific file → Type filename.js

9. Preserve Logs on Page Reload

By default, console logs disappear when you reload. To fix this:

  • Open DevTools
  • Go to the Console tab
  • Check the "Preserve log" option

Now, logs remain even after page refreshes.

10. Profile Performance with console.time()

Want to measure how long a function takes to execute? Use:

console.time("Execution Time");
expensiveFunction();
console.timeEnd("Execution Time");
Enter fullscreen mode Exit fullscreen mode

This logs the execution time in milliseconds, helping you optimize performance.

📢 Let’s Connect!

💼 LinkedIn | 📂 GitHub | ✍️ Dev.to | 🌐 Hashnode

💡 Join the Conversation:

  • Found this useful? Like 👍, comment 💬.
  • Share 🔄 to help others on their journey!
  • Have ideas? Share them below!
  • Bookmark 📌 this content for easy access later.

Let’s collaborate and create something amazing! 🚀

Top comments (0)