CODEWITHSUNDEEP
javascriptdebugginggoogle-chrome-devtoolsbreakpoints
aaaidan
aaaidan

Reputation: 7336

Chrome DevTools: setting a breakpoint on document scroll change?

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

Upvotes: 38

Views: 21769

Answers (2)

Filip Grace
Filip Grace

Reputation: 564

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

Upvotes: 53

Ionică Bizău
Ionică Bizău

Reputation: 113455

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

Upvotes: 13

Related Questions