Elevate Your Debugging Game: Advanced Alternatives to console.log()

Let's look at a common workflow pattern. You encounter a bug inside a complex JavaScript click handler or loops condition. Your hand instantly moves to your keyboard and types out:

JavaScript

console.log("here", data);

While console.log has served us well over the years, relying on it as your primary debugging framework is highly inefficient. It forces you to continuously change code strings, restart local bundler servers, and clutters production pipelines if left behind accidentally.

Let's dive into 3 powerful, built-in browser debugging techniques that will dramatically speed up your front-end development cycle.

1. console.table() — The Structured Object Transformer

When logging arrays of user objects or database response arrays, standard logs require you to constantly expand deep nested toggle trees.

Instead, leverage console.table(). It builds a runtime graphical spreadsheet grid directly inside your browser console window.

const engineeringTeam = [
  { id: "101", name: "Abu Taher", coreRole: "Full Stack Developer", active: true },
  { id: "102", name: "Jane Smith", coreRole: "DevOps Engineer", active: false },
  { id: "103", name: "Alex Jones", coreRole: "UI/UX Motion Architect", active: true }
];

console.table(engineeringTeam);

The Console UI Result:
It formats your raw object keys into dedicated columns and values into rows. Best of all, the browser column headers are sortable! Clicking the columns instantly sorts your running JavaScript datasets dynamically inside the dev console layout.

2. Manual Time-Freezing with debugger;

Instead of guessing values during active execution steps, you can directly command the browser rendering engine to halt execution mid-run by declaring a debugger; statement.

export function processInvoicePayment(amount, taxMultiplier) {
  const calculatedTax = amount * taxMultiplier;
  
  // The JavaScript engine will freeze completely right here
  debugger; 
  
  const finalTotal = amount + calculatedTax;
  return finalTotal;
}

How to execute this:

1. Open your browser Chrome Developer Tools panel.

2. Trigger the action on your application (e.g., click the pay button).

3. The browser will instantly lock the execution state exactly at the debugger; keyword.

4. You can now hover your mouse cursor over any local scope variable directly inside your codebase to see its exact live value right at that second.

3. Conditional Breakpoints via Sources Layout

Imagine you have an item loop or a map function processing an array of 500 items, and your code crashes only on a single item. Creating a normal breakpoint means clicking "Next Step" hundreds of times to find the problem.

The Pro Workflow Solution:

1. Open up DevTools and go to the Sources tab.

2. Navigate to your file structure and click on the specific script line that contains the bug.

3. Instead of a left click, Right-Click the line number column and choose "Add conditional breakpoint..."

4. Paste a precise JavaScript validation conditional script string, such as: product.price > 10000 or index === 412.

The runtime thread will now run at full production speeds without stopping, only halting code execution the exact second your specific edge case rule evaluates to true!

What is your favorite method for handling this in your workflow? Let me know in the comments!