Magento 2 Ajax商品目录仅在开启检查元素时生效问题排查

这种情况我之前在Magento项目里碰到过好几次，挺让人头疼的，不过大概率是和浏览器的性能优化机制或者插件的事件绑定逻辑有关，给你几个具体的排查方向：

• 检查插件的事件绑定方式
  很多这类Ajax插件会用$(selector).click()这种静态绑定来监听筛选器点击，但如果你的分类页侧边栏是异步加载（比如通过Magento的延迟加载组件），正常情况下插件绑定事件时，筛选器的DOM元素还没渲染出来，自然触发不了Ajax；但开启开发者工具时，页面加载速度变慢，DOM刚好在事件绑定前完成渲染，所以能正常工作。
  建议去插件核心JS文件里，把静态绑定改成事件委托：$(document).on('click', '.your-filter-selector', function() { /* 原Ajax逻辑 */ })，这样不管DOM什么时候渲染，事件都能被监听。

• 排查节流/防抖函数的影响
  有些插件为了优化性能，会给筛选器点击事件加节流（比如用_.throttle或者自定义节流逻辑）。正常情况下如果节流的延迟时间设置得过长，或者和浏览器的性能优化机制冲突，会导致点击事件被“吞掉”；但开启开发者工具时，浏览器会自动禁用部分性能优化，节流逻辑失效，事件就正常触发了。
  你可以暂时注释掉插件里的节流代码，测试是否恢复正常，再调整合适的延迟时间。

• 检查隐藏元素的事件绑定问题
  如果侧边筛选器初始状态是被CSS隐藏的（比如display: none），然后通过JS动态显示，部分浏览器对隐藏元素的事件绑定存在兼容性问题——正常状态下隐藏元素的点击事件没被正确绑定，但开启开发者工具时，浏览器会重新计算元素渲染状态，事件就生效了。
  可以检查筛选器的初始CSS，或者在插件中负责显示筛选器的函数里，重新绑定一次点击事件。

• 排查Magento的JS缓存/合并问题
  近期有没有修改过Magento的静态文件配置？比如开启了JS合并、压缩或者静态文件缓存。有时候合并后的JS会出现加载顺序错误（比如插件的JS在jQuery之前加载），导致事件绑定失败；但开启开发者工具时，浏览器通常会禁用缓存，重新加载正确顺序的JS文件，所以功能正常。
  建议先临时禁用Stores > Configuration > Advanced > Developer里的JS合并和静态文件缓存，测试是否恢复正常，如果没问题，再重新生成静态文件并调整JS加载顺序。

• 排查第三方插件冲突
  近期有没有安装新的Magento插件？有些分类页相关的插件（比如层级导航优化、产品列表插件）会修改DOM结构或者劫持点击事件，导致Ajax筛选插件的事件被覆盖。开启开发者工具时，可能冲突插件的逻辑被干扰，所以功能暂时正常。
  可以尝试逐个禁用近期安装的插件，测试筛选功能是否恢复，找到冲突插件后再调整两者的事件逻辑。

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