Chrome DevTools：在文档滚动更改时设置断点？

Question

有时，在大型客户端 web 应用程序中，有必要通过 scrollTo() 调用确定哪一行代码滚动了文档（或者如果这甚至是滚动的原因*）。

是否有任何 Chrome DevTools 功能会中断 window 滚动上的 JS 执行？我正在想象一个类似于 DOM 断点功能的功能。

* 滚动也可能由于其他原因发生，例如在屏幕外输入文本 <input>。

Answer 1

您可以使用 JavaScript 事件侦听器断点。在 Chrome 开发人员工具的源选项卡中，找到 "Event Listener Breakpoints"，然后 "scroll" 断点位于 "Control".

下

How to add event breakpoint

Answer 2

我将它用于 override/proxy scroll 函数并在新函数中设置 debugger 的方式。

我运行控制台中的以下代码片段，希望其中一个滚动功能将被调用：

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

Chrome DevTools：在文档滚动更改时设置断点？

Chrome DevTools: setting a breakpoint on document scroll change?

javascript

debugging

breakpoints

google-chrome-devtools