如何在Chrome DevTools中使用事件监听器定位页面加载自动滚动的触发原因

• 启用scroll事件断点
  打开DevTools「Sources」面板，在右侧「Event Listener Breakpoints」列表中展开「Scroll」分类，勾选scroll事件。只要页面触发滚动动作，调试器会立即暂停执行，你可以在Call Stack调用栈中直接回溯触发滚动的上层业务代码，不管是直接调用滚动API还是间接触发滚动的逻辑都能被拦截。
• 拦截滚动相关原生API
  如果滚动触发时间过早，事件断点还未绑定就已经执行，可以先在「Event Listener Breakpoints」>「Script」分类下勾选Script First Statement，让页面加载第一个JS文件时就暂停，此时在Console面板执行以下代码给滚动API加调试拦截：

debug(window.scrollTo);
debug(window.scrollBy);
debug(Element.prototype.scrollTo);
debug(Element.prototype.scrollBy);
Object.defineProperty(window, 'scrollTop', {
  set: function() { debugger; }
});

后续只要有代码调用这些API修改滚动位置，都会直接触发调试暂停，快速定位到调用位置。

• 排查focus相关的隐式滚动
  很多时候加载时自动聚焦输入框会触发浏览器默认滚动行为将聚焦元素挪到视口内，你可以在「Event Listener Breakpoints」>「Control」分类下勾选focus事件，排查是否有代码在加载阶段主动调用了focus()方法，或者页面元素带了autofocus属性。
• 用性能录制定位非JS触发的滚动
  如果上述JS断点都没有触发，说明是浏览器默认行为或资源加载导致的滚动：比如URL带hash锚点指向页面下方元素、图片/异步内容加载完成后撑开页面高度触发重排。你可以打开「Performance」面板，勾选「Screenshots」选项，录制完整的页面加载过程，对照时间轴上的滚动发生节点，查看附近的资源加载、DOM更新动作即可定位原因。

内容的提问来源于stack exchange，提问作者user1462617