Как найти, какой код запускается кнопкой / элементом в Chrome с помощью инструментов разработчика

ответ Александра Павлова приближается к тому, что вы хотите.

из-за расширенности абстракции и функциональности jQuery, много обручей должны быть перепрыгнуты, чтобы добраться до мяса события. Я установил это jsFiddle для демонстрации работы.

1. Настройка точки останова прослушивателя событий

вы были близки к этому.

1. откройте инструменты Chrome Dev (F12) и перейдите на вкладку источники.
2. перейти к мыши - > нажмите
   
   (нажать для увеличения)

2. Нажмите кнопку!

Chrome Dev Tools приостановит выполнение скрипта и представит вам эту красивую запутанность мини-кода:

(нажать для увеличения)

3. Найдите славный код!

теперь фишка тут не увлекайтесь нажатие клавиши и следите за экраном.

1. нажать F11 ключ (шаг в), пока не появится нужный исходный код
2. исходный код, наконец, достигли
   • на jsFiddle образец, приведенный выше, я должен был нажать F11 108 раз перед достижением желаемого обработчика событий / функции
   • ваш пробег может варьироваться, в зависимости от версии jQuery (или библиотеки framework), используемой для привязки событий
   • с достаточным посвящением и временем, вы можете найти любой обработчик события/функции

4. Объяснение

У меня нет точного ответа или объяснения, почему jQuery проходит через многие слои абстракций, которые он делает - все, что я могу предложить, это то, что это из-за работы делает, чтобы абстрагироваться от его использования в браузере, выполняющем код.

здесь jsFiddle С отладочной версией jQuery (т. е. не уменьшенной). Когда вы смотрите на код на первой (не уменьшенной) точке останова, вы можете видеть, что код обрабатывает многие вещи:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

причина, по которой я думаю, что вы пропустили его при попытке, когда"выполнение приостанавливается, и я прыгаю строка за строкой", потому что вы, возможно, использовали функцию " Step Over, вместо шага. Вот это StackOverflow ответ объясняю разницу.

наконец, причина, по которой ваша функция не прямая привязка к обработчику событий click происходит потому, что jQuery возвращает функцию, которая получает привязку. функция jQuery, в свою очередь, проходит через некоторые слои абстракции и проверки, и где-то там он выполняет вашу функцию.

звучит как "...и я прыгаю строчка за строчкой..." - это неправильно. Вы StepOver или StepIn, и вы уверены, что случайно не пропустите соответствующий вызов?

тем не менее, отладка фреймворков может быть утомительной именно по этой причине. Чтобы облегчить проблему, вы можете включить эксперимент "включить поддержку отладки фреймворков". Счастливой отладки! :)

можно использовать findHandlersJS

вы можете найти обработчик, выполнив в консоли chrome:

findEventHandlers("click", "img.envio")

вы получите следующую информацию, напечатанную в консоли chrome:

• элемент
  Фактический элемент, в котором был зарегистрирован обработчик событий в
• событий
  Массив с информацией об обработчиках событий jquery для интересующего нас типа событий (например, нажмите, измените и т. д.)
• проводник
  Фактический метод обработчика событий, который вы можете увидеть, щелкнув правой кнопкой мыши и выбрав показать определение функции
• селектор
  Селектор для делегированных событий. Он будет пуст для прямых событий.
• цели
  Список элементов, для которых предназначен этот обработчик событий. Например, для делегированного обработчика событий, зарегистрированного в объекте document и предназначенного для всех кнопок на странице, это property перечислит все кнопки на странице. Вы можете навести их и увидеть их выделенными в chrome.

Подробнее здесь и вы можете попробовать его в этом примере сайта здесь.

это решение нуждается в метод данных jQuery.

1. Откройте консоль Chrome (хотя любой браузер с загруженным jQuery будет работать)
2. Run $._data($(".example").get(0), "events")
3. детализация вывода для поиска нужного обработчика событий.
4. щелкните правой кнопкой мыши на " обработчик "и выберите"Показать определение функции"
5. код будет показан на вкладке Источники

$._data() просто обращается к методу данных jQuery. Более читаемой альтернативой может быть jQuery._data().

интересный момент с это так ответ:

по состоянию на jQuery 1.8 данные события больше не доступно из "публичного API" для данных. Читать это сообщение в блоге jQuery. Теперь вы должны использовать это вместо:

jQuery._data( elem, "events" ); elem должен быть HTML-элементом, а не объект jQuery, или селектор.

обратите внимание, что это внутренняя, "частная" структура, и не следует изменять. Используйте это только для отладки.

в старых версиях jQuery вам, возможно, придется использовать старый метод а именно:

jQuery( elem ).data( "events" );

версия агностического jQuery будет:(jQuery._data || jQuery.data)(elem, 'events');