WordPress站点如何调试JavaScript排查iframe点击后重复加载异常

1 定位锚点变更触发的调用逻辑 #

• 打开Chrome DevTools「Sources」面板，在右侧「Event Listener Breakpoints」分类下找到Load分组，勾选hashchange断点。触发点击Klimt的操作后，代码会直接停在锚点变更后执行的第一个函数，向上回溯调用栈即可定位到绑定锚点监听、触发iframe重载的业务代码。
• 如果hashchange断点未命中，可在Console面板执行以下代码，拦截所有iframe的src修改行为，触发交互后控制台会输出完整调用栈：

// 替换下方选择器为你页面内实际的iframe选择器
const targetIframe = document.querySelector('iframe');
const nativeSrcSetter = Object.getOwnPropertyDescriptor(HTMLIFrameElement.prototype, 'src').set;
Object.defineProperty(targetIframe, 'src', {
  set: function(newVal) {
    console.trace('iframe src被修改，新地址：', newVal);
    nativeSrcSetter.call(this, newVal);
  }
});

2 定位Loading遮罩的控制逻辑 #

• 触发Loading显示后，用DevTools「Elements」面板的元素选择工具选中Loading遮罩层，记录它的class或id属性值。
• 切换到「Sources」面板，按Ctrl+Shift+F（Mac为Command+Option+F）打开全局搜索，输入刚才记录的类名/ID搜索，找到控制该元素显示的函数后打上断点，触发交互即可溯源调用来源。

3 排查WordPress升级带来的兼容问题 #

该异常是WordPress版本升级后出现的，优先排查以下两类变更：

• 检查升级后更新的主题、插件功能：尤其是画廊类、自定义路由/锚点导航类插件，很多这类插件升级后会默认开启「锚点变更刷新动态内容」的逻辑，和你原有iframe加载逻辑冲突会导致重复触发重载。
• 检查JS资源加载顺序：WordPress升级后可能改变了wp_enqueue_script的加载优先级，导致你原有的锚点监听事件被重复绑定两次，单次交互触发两次执行逻辑，对应出现两次加载的表现。

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