Chrome DevTools：在文档滚动更改上设置断点？答案

【问题标题】：Chrome DevTools: setting a breakpoint on document scroll change?Chrome DevTools：在文档滚动更改上设置断点？
【发布时间】：2015-07-29 11:43:54
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript debugging google-chrome-devtools breakpoints

【解决方案1】：

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

How to add event breakpoint

【讨论】：

对我不起作用:(。添加了一个断点，但是当手动滚动（使用鼠标滚轮）或在文本框中输入文本时，某些东西正在滚动窗口，但没有断点
@Mario 也许这只会在 javascript 事件监听器上中断？我注意到它在这个 stackoverflow 页面上工作：它打破了看起来像 jQuery 的滚动处理程序。
没错，我的卷轴上没有事件，所以不会导致@某个点中断
404 HTTP。链接失效

【解决方案2】：

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

我在控制台中运行以下 sn-p，希望调用其中一个滚动函数：

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

【讨论】：

这很好用，但似乎只有在调用window.scrollTo(...) 时才有效。如何为其他可滚动元素（例如，任何被定义为“溢出：自动”的元素）捕获它？
@TXN 你必须猜测如果滚动是通过编程方式触发的，并且通常scrollTo 正在被使用，那么可以调用什么函数。您可能希望使用元素引用而不是 window 来代理特定元素上的滚动功能。