35

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>.

aaaidan
  • 7,093
  • 8
  • 66
  • 102

2 Answers2

47

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".

Ninjakannon
  • 3,751
  • 7
  • 53
  • 76
Filip Grace
  • 504
  • 6
  • 5
  • 2
    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 – Mario Apr 24 '18 at 13:33
  • @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. – aaaidan Apr 29 '18 at 09:45
  • 1
    exactly, I don't have events on the scroll, so that didnt cause to break @ certain point – Mario May 01 '18 at 06:18
  • 1
    404 HTTP. Link not work – drdrej Oct 06 '21 at 14:52
12

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")
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
  • 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")? – TXN May 14 '21 at 19:39
  • @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. – Ionică Bizău May 16 '21 at 06:46