如何为Custom Event添加断点，调试第三方自定义事件？

下面是几个不用修改第三方代码就能调试自定义事件的实用方法：

方法1：临时添加带调试器的事件监听器 #

在浏览器控制台给事件的目标元素（或冒泡链上的元素，比如document）添加一个临时监听器，当事件触发时自动进入调试：

// 替换成你要调试的自定义事件名
document.addEventListener('foobar-happened', () => {
  debugger;
});

事件触发后，调试器会暂停，你可以通过调用栈回溯到第三方代码的派发位置。

方法2：重写dispatchEvent做条件断点 #

覆盖DOM元素的dispatchEvent方法，当匹配目标事件类型时触发调试：

const originalDispatch = EventTarget.prototype.dispatchEvent;
EventTarget.prototype.dispatchEvent = function(event) {
  if (event.type === 'foobar-happened') {
    debugger; // 仅当目标事件触发时暂停
  }
  return originalDispatch.call(this, event);
};

调试完成后，记得恢复原方法避免影响后续操作：

EventTarget.prototype.dispatchEvent = originalDispatch;

方法3：检查DevTools的隐藏断点选项 #

部分浏览器（如Chrome）的DevTools在Event Listener Breakpoints面板里，有一个Miscellaneous分类，里面包含Custom events选项，勾选后所有自定义事件触发时都会暂停。如果你的浏览器有这个选项，这是最简便的方法。

内容的提问来源于stack exchange，提问作者Denilson Sá Maia