🐛 Top 6 JavaScript Debugging Tricks No One Knows

JavaScript, the ever-so-dynamic language of the web, has a dark side that often leaves developers scratching their heads. Debugging those tricky bugs can become its own challenging adventure. While most coders rely on traditional methods like console.log and breakpoints, it's time to discover some hidden gems for debugging hacks.

1. The Magic of console.table

Visualize complex objects and arrays with console.table. This transforms your data into a well-structured tabular format within your console:

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

2. Unravel Call Stacks with console.trace

When you’re lost in a maze of function calls, console.trace comes to the rescue. Get a clear picture of how your code arrived at a specific point, illuminating the path of execution.

function foo() {
  function bar() {
    console.trace("Trace from function bar"); 
  }
  bar();
}
foo();

3. Performance Profiling

Optimize like a pro using the browser’s built-in performance tools. Start profiling with console.time('label') and end it with console.timeEnd('label'). This will log the execution time of your code blocks, pinpointing bottlenecks.

function sortNumbers(numbers) {
  // Let's use bubble sort here for demonstration 
  // (but it's not the most efficient way to sort!)
 
  for (let i = 0; i < numbers.length; i++) {
    for (let j = 0; j < numbers.length - i - 1; j++) {
      if (numbers[j] > numbers[j + 1]) {
        let temp = numbers[j];
        numbers[j] = numbers[j + 1];
        numbers[j + 1] = temp;
      }
    }
  }
  return numbers;
}

// Generate a large array of random numbers
const unsortedArray = [];
for (let i = 0; i < 10000; i++) {
  unsortedArray.push(Math.floor(Math.random() * 1000));
}

// Measure the sorting time
console.time('Sorting Time'); 
const sortedArray = sortNumbers(unsortedArray);  
console.timeEnd('Sorting Time');

// Sorting Time: 66.73681640625 ms

4. Embrace Advanced Assertions

Assert your assumptions with console.assert. It logs an error if the assertion is false, helping you fail early and catch potential errors:

console.assert(myArray.length > 0, "myArray is empty!");

5. “Poor Man’s” Time Travel Debugging

While “true” time travel debugging might still be sci-fi, you can create snapshots of your application’s state. Use JSON.stringify() to serialize objects and store them, allowing you to revisit and analyze past states for tricky bugs.

const stateSnapshot = JSON.stringify(currentAppState); 
// Store stateSnapshot for later comparison

Sometimes, you just need a more visually pleasing view of a complex object or a large chunk of JSON data. Combine JSON.stringify with some formatting:

const complexObject = { /* ... your data */ };
console.log(JSON.stringify(complexObject, null, 2));

This will output your data as a nicely formatted JSON string with indentation, making it much easier to parse and understand.

6. Unveiling Object Properties with console.log({obj})

While console.log(obj) is the go-to for logging objects, it can be frustrating for complex objects with nested structures. By wrapping the object in curly braces, you’re essentially creating a new object literal with the original object as a single property. This instructs the console to use its improved formatting for objects, revealing the properties and their values in a more readable way:

const person = { name: "Alice", age: 30 };
console.log(person); // { name: "Alice", age: 30 }
console.log({ person }); // { person: { name: "Alice", age: 30 } }

Remember, debugging is as much an art as it is a science. Embrace the process, and don’t be afraid to experiment! The more you practice these methods and explore the hidden corners of your browser’s developer tools, the more you’ll level up your JavaScript mastery.

Learn More