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

Question

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

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

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

Answer 1

您可以使用 JavaScript 事件侦听器断点。 在 Chrome 开发者工具的源选项卡中，找到“事件侦听器断点”，然后“滚动”断点位于“控制”下。

如何添加事件断点

Answer 2

我使用它来覆盖/代理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")