Effective Debugging Techniques with Chrome DevTools

Many developers are unaware of simple yet powerful debugging methods, leading to inefficient bug hunting. This guide introduces several Chrome DevTools techniques to improve debugging efficiency for frontend development.

DevTools Overview

Chrome DevTools is an essential tool for frontend developers. Below are key debugging strategies.

Breakpoints

Beyond the default breakpoint, there are conditional breakpoints and logpoints.

Breakpoint

Execution pauses when the line is reached.

Conditional Breakpoint

The debugger pauses only when a specified expression evaluates to true, e.g., a === 1 . This is useful for intermittent bugs where you need to verify input values.

Logpoint

A logpoint prints an expression to the console without pausing execution. For example, logging variable a can be done via a logpoint. When debugging minified code with source maps, variable names may differ; you can locate the real variable in the Scope panel or disable source maps.

Performance

Use the Performance panel to capture which code runs during an operation, helping you discover unexpected execution paths.

Who Modified My Code?

To identify which code stops event propagation, inject the following snippet in the console:

var tmpStopPropagation = MouseEvent.prototype.stopPropagation;

MouseEvent.prototype.stopPropagation = function(...args) {
  console.trace('stopPropagation');
  tmpStopPropagation.call(this, ...args);
};

Similarly, to find what triggers scrolling on a container, override scrollTop :

var tmpScrollTop = element.scrollTop;

Object.defineProperty(element, 'scrollTop', {
  get: function() { return tmpScrollTop; },
  set: function(newVal) {
    console.trace('scrollTop');
    tmpScrollTop = newVal;
  }
});

setTimeout Tricks

When you need a breakpoint without manual interaction, use:

setTimeout(() => { debugger; }, 4000);

For quick variable inspection without adding console.log , you can log a value periodically:

setTimeout(() => { console.log(yourInstance.getSomeValue()); }, 100);

SSR Debugging

To debug server‑side rendered pages, disable JavaScript in the Sources panel (Cmd+P → ">disable javascript") and reload the page to view the pure SSR output.

Binary‑Search Debugging

When a bug appears after a certain version, use a binary‑search style approach: comment out large code blocks, test, and iteratively narrow down the problematic section, similar to a binary search algorithm.

Conclusion

These techniques represent only a subset of effective debugging methods; additional strategies may further improve your workflow.

Recruitment Notice

The Feishu Docs Platform team is hiring for 20+ positions across Shenzhen, Hangzhou, and Guangzhou. Interested candidates can contact the author for interview guidance. Campus referral code: Y6C5TPQ. Links: Campus Recruitment , Social Recruitment .

Byte Youth Camp

The first Byte Youth Camp for frontend is open for registration, offering learning and internship opportunities. Register here .