JavaScript Debugging: Tricks for Faster Fixes

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); 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(); 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(); 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); Use object shorthand: console.log({ user, age }); 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"); This logs the execution time in milliseconds, helping you optimize performance.

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

function test() {
  let x = 10;
  debugger;
  console.log(x);
}
test();

function myFunction() {
  console.trace("Function call trace:");
}
myFunction();

console.log("user:", user, "age:", age);

console.log({ user, age });

console.time("Execution Time");
expensiveFunction();
console.timeEnd("Execution Time");