Chrome DevTools: setting a breakpoint on document scroll change?

Question

Sometimes, in a large clientside webapp, it's necessary to identify which line of code has scrolled the document with a scrollTo() call (or if this is even the cause of the scroll*).

Is there any Chrome DevTools feature which will break JS execution on a window scroll? I'm imagining a feature similar to the DOM Breakpoints feature.

* Scrolling can also happen for other reasons, such as text input in an offscreen <input>.

Solution 1

You can use a JavaScript event listener breakpoint. In the sources tab for Chrome developer tools, locate the "Event Listener Breakpoints" and then the "scroll" breakpoint is located under "Control".

How to add event breakpoint

Solution 2

The way I use it to override/proxy the scroll functions and set a debugger in the new function.

I run the following snippet in the console, with the hope one of the scroll functions will be called:

const proxyFn = fnName => {
  const oldFn = window[fnName];
  window[fnName] = (...args) => {
    debugger;
    oldFn(...args)
  }
}

Object.keys(window).filter(c => c.includes("scroll")).forEach(c => proxyFn(c))
// or, if you want to "catch" the "scrollTo" function
proxyFn("scrollTo")

Comments

[Mario]

didnt work for me :(. Added a breakpoint, but when manually scrolling (using the mousewheel) or when entering text in a textbox something is scrolling the window, but no breakpoint

[aaaidan]

@Mario Perhaps this will only break on javascript event listeners? I notice it works on this stackoverflow page: it breaks in what looks like jQuery's scroll handler.

[Mario]

exactly, I don't have events on the scroll, so that didnt cause to break @ certain point

[TXN]

This work well, but seems to work only if window.scrollTo(...) is called. What to do to catch it for other scrollable elements (e.g. any element being defined as "overflow: auto")?

[Ionică Bizău]

@TXN You'd have to guess what function can be called, if the scroll is triggered programmatically, and usually scrollTo is being used. You may want to use the element reference instead of window to proxy the scroll functions on a particular element.

[drdrej]

404 HTTP. Link not work