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

Question

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

是否有任何Chrome DevTools功能会破坏窗口滚动上的JS执行？我正在想象一个类似于DOM Breakpoints功能的功能.

*滚动也可能由于其他原因而发生,例如屏幕外的文本输入<input>.

Answer 1

您可以使用JavaScript事件侦听器断点.在Chrome开发人员工具的"来源"标签中,找到"事件监听器断点",然后"滚动"断点位于"控制"下.

如何添加事件断点

Answer 2

我使用它来覆盖/代理scroll函数并debugger在新函数中设置 a的方式。

我在控制台中运行以下代码片段，希望其中一个滚动函数会被调用：

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