5 Powerful JavaScript Debugging Techniques Every Front‑End Developer Should Know

Although console.log is simple and direct, it often becomes inefficient when handling complex problems. This article shares five powerful debugging techniques to help you locate and fix issues faster.

1. Leverage debugger breakpoints

Compared to inserting many console.log statements, setting breakpoints gives a clearer view of code execution.

Basic breakpoint usage

function calculateTotal(items) {
    debugger; // Execution pauses here
    let total = 0;

    for (const item of items) {
        total += item.price * item.quantity;
    }

    return total;
}

// Call the function
const cart = [
    { name: 'T恤', price: 99, quantity: 2 },
    { name: '鞋子', price: 299, quantity: 1 }
];
calculateTotal(cart);

Conditional breakpoints

In Chrome DevTools, right‑click the line number and choose “Add conditional breakpoint”:

function processUsers(users) {
    users.forEach((user, index) => {
        // Pause when processing the 5th user
        // Set condition in DevTools: index === 4
        processUserData(user);
    });
}

2. Advanced console methods

While overusing console.log should be avoided, the console family offers many powerful tools.

console.table

Perfect for displaying arrays and objects:

const users = [
    { id: 1, name: '张三', age: 28 },
    { id: 2, name: '李四', age: 32 },
    { id: 3, name: '王五', age: 25 }
];

// Show data as a table
console.table(users);

// Show specific columns only
console.table(users, ['name', 'age']);

console.trace

View the function call stack:

function function1() {
    function2();
}

function function2() {
    function3();
}

function function3() {
    console.trace('函数调用追踪');
}

function1();

Timing performance with console.time

console.time('数据处理');

const data = someExpensiveOperation();
processData(data);

console.timeEnd('数据处理');

3. Debugging production code with Source Maps

Debugging minified code in production is a nightmare. Using Source Maps maps compressed code back to the original source.

Webpack configuration

Using Source Maps for debugging

Even when the code is minified, you can view the original source in the browser and set breakpoints.

4. Asynchronous debugging techniques

Debugging async code is often the most painful. Here are some practical tips:

Async/Await breakpoint debugging

Promise chain debugging

5. Performance debugging tools

Using the Performance panel

Memory leak debugging

Feel free to add more.