Как отловить обработчики событий, созданные jquery

Question

Я работаю над проектом, в котором много унаследованного кода в jQuery создает обработчики onChange, onClick во многих разных местах. При запуске приложения - я вижу все виды странной функциональности, чем у меня уходит какое-то время, чтобы полностью изменить eng. и найти место действия.

Есть ли простой способ установить точку останова и перехватить все или некоторые конкретные функции jquery.on('...?

Upd: главная проблема, обработчики добавляются и удаляются все время. Иногда селекторы не так тривиальны (например, третий ребенок tr в определенном классе). Я действительно знаю, как использовать dev-tools, я искал умный способ сократить путь реверс-инжиниринга и добраться до нужного места в стеке вызовов, где был создан / добавлен обработчик.

Answer 1

Вы можете перезаписать функцию on функцией, которая перехватывает регистрацию обработчика события, функцией, содержащей оператор debugger, а также вызовом обработчика события.Как это:

const oldOn = jQuery.fn.on;
jQuery.fn.extend({
  on(...args) {
    const f = args.pop();
    oldOn.call(this, ...args, function(...args) {
      debugger;
      f.call(this, ...args);
    });
  }
});

jQuery( "#box" ).on( "click", function() {
  console.log( 'clicked' );
});

#box {
  position: relative;
  height: 100px;
  width: 100px;
  background: skyblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>

Примечание: debugger не работает на SO, но работает на jsfiddle: https://jsfiddle.net/7kr5y2d8/2/