使用jQuery noConflict别名时，如何在DevTools中查看事件监听器？

问题场景 #

通过jQuery.noConflict(true)创建别名$j，并在自执行函数中用$作为别名绑定点击事件，但DevTools的常规事件面板无法识别这些监听器。代码示例如下：

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

<!-- 无法修改的外部JS文件 -->
<script>
// external.js 内容
let $j = $.noConflict(true);
(function($) {
  $(function() {
    init();
  });
  function init() {
    $('.click').on('click', function() {
      console.log('click');
      return false;
    });
  }
})($j);
$j = null;
</script>

<a href="#" class="click">click</a>

解决方案 #

noConflict(true)会移除全局的$和jQuery变量，DevTools默认依赖全局jQuery实例识别绑定事件，因此需要手动提取：

Chrome DevTools 操作步骤 #

1. 打开DevTools的控制台(Console)
2. 选中目标元素（点击.click链接后，用$0指代当前选中元素）
3. 执行以下代码提取事件：

// 获取元素的jQuery内部缓存
const cache = $0[jQuery.expando];
// 打印所有绑定的事件
console.log(cache?.events);

若全局无jQuery变量，可通过Sources面板找到加载的jQuery文件，临时添加window.jQuery = jQuery;（仅调试用），或直接从jQuery作用域中获取实例。

Firefox DevTools 操作步骤 #

1. 打开DevTools的控制台(Console)
2. 选中目标元素，用$0指代
3. 执行代码提取事件：

const cache = $0[jQuery.expando];
console.log(cache?.events);

或者：

1. 打开**调试器(Debugger)**面板，定位到jQuery.fn.on方法并打断点，触发事件时即可捕获绑定的回调函数。

通用调试技巧 #

• 若$j被置为null，可通过**内存快照(Memory Snapshot)**查找jQuery实例：在Chrome DevTools的Memory面板拍摄快照，搜索jQuery找到对应实例，再用该实例访问元素缓存。
• 利用Sources面板的本地覆盖功能，临时在外部JS末尾添加window.$j = $j;（不修改原文件），之后直接用$j('.click').data('events')查看事件。

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