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