Я использую Chrome и свой собственный сайт.

Что я знаю изнутри:

1 ) У меня есть форма, где люди подписываются, нажимая эту оранжевую кнопку с изображением:

2 ) Я это проверяю, и это все, что есть: <img class="formSend" src="images/botoninscribirse2.png">

3 ) В верхней части исходного кода находятся тонны исходников скриптов. Я знаю, какую кнопку вызывает кнопка, потому что я ее кодировал:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) В этом файле вы можете найти: $(".formSend").click(function() { ... });что именно вызывается кнопкой (чтобы выполнить довольно сложную проверку формы и отправку), и что я хочу, - это найти ее с помощью инструментов разработчика Chrome на любом веб-сайте.

Как я могу узнать, где вызывается элемент?

Вкладка слушателей не работает для меня. И тогда я попытался посмотреть на прослушивателей событий клика, что показалось мне безопасной ставкой, но ... там ничего jquery2.jsнет (и я бы не знал, какой файл представляет собой код, так что я бы потратил время на проверку всего этого). .):

Моя $(".formSend").click(function() { ... });функция в jquery2.jsфайле отсутствует.

Джесси объясняет почему :

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

Как предположили некоторые из вас, я собрал методы, которые работали в одном ответе ниже .

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

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

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

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

1. Откройте Chrome Dev Tools (F12) и перейдите на вкладку Sources.
2. Развернуть до мыши -> нажмите (нажмите, чтобы увеличить)
   
   

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

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

(нажмите, чтобы увеличить)

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

Хитрость заключается в том, чтобы не увлекаться нажатием клавиши, а следить за экраном.

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

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» вместо Step In. Вот ответ StackOverflow, объясняющий различия.

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

Решение 1: фреймворк блэкбоксинга

Прекрасно работает, минимальная настройка и никаких третьих лиц.

Согласно документации Chrome :

Что происходит, когда вы включаете скрипт?

Исключения, сгенерированные из кода библиотеки , не будут приостанавливаться (если включена Пауза для исключений), При входе / выходе / обхождении обходится код библиотеки, Точки останова прослушивателя событий не нарушаются в коде библиотеки, Отладчик не будет останавливаться на любых точках останова, установленных в библиотеке. код. В результате вы отлаживаете код своего приложения вместо сторонних ресурсов.

1. Откройте Chrome Developer Tools ( F12или ⌘+ ⌥+ i), перейдите в настройки (вверху справа или F1). Найдите вкладку слева под названием « Blackboxing »

2. Здесь вы помещаете шаблон RegEx файлов, которые Chrome должен игнорировать при отладке. Например: jquery\..*\.js(Глоб шаблон / человек перевод: jquery.*.js)
3. Если вы хотите пропустить файлы с несколькими шаблонами, вы можете добавить их, используя символ конвейера |, например: jquery\..*\.js|include\.postload\.js(который действует как «или этот шаблон», так сказать. Или продолжайте добавлять их с помощью кнопки «Добавить»).
4. Теперь перейдите к решению 3, описанному ниже.

Бонусный совет! Я регулярно использую Regex101 (но есть много других :), чтобы быстро протестировать свои ржавые шаблоны регулярных выражений и выяснить, в чем я не прав с пошаговым отладчиком регулярных выражений. Если вы еще не «свободно владеете» регулярными выражениями, я рекомендую вам начать использовать сайты, которые помогают вам писать и визуализировать их, такие как http://buildregex.com/ и https://www.debuggex.com/

Вы также можете использовать контекстное меню при работе на панели источников. При просмотре файла вы можете щелкнуть правой кнопкой мыши в редакторе и выбрать Blackbox Script. Это добавит файл в список на панели настроек:

Решение 2. Визуальное событие

Это отличный инструмент, чтобы иметь :

Visual Event - это букмарклет с открытым исходным кодом Javascript, который предоставляет отладочную информацию о событиях, которые были прикреплены к элементам DOM. Визуальное событие показывает:

• К каким элементам прикреплены события
• Тип событий, прикрепленных к элементу
• Код, который будет запущен с событием, сработал
• Исходный файл и номер строки, для которой была определена присоединенная функция (только браузеры Webkit и Opera)

Решение 3: отладка

Вы можете приостановить код, когда щелкаете где-то на странице или когда изменяется DOM ... и другие виды точек останова JS, которые будет полезно знать. Вы должны применить черный ящик здесь, чтобы избежать кошмара.

В этом случае я хочу знать, что именно происходит, когда я нажимаю кнопку.

1. Откройте Dev Tools -> вкладку Sources и справа найдите Event Listener Breakpoints:

   

2. Разверните Mouseи выберитеclick

3. Теперь щелкните элемент (выполнение должно быть приостановлено), и теперь вы отлаживаете код. Вы можете пройти через весь код нажатия F11(который является шаг в ). Или вернитесь на несколько прыжков в стеке. Там может быть тонна прыжков

Решение 4: Ключевые слова для рыбалки

С активированными Dev Tools вы можете искать всю кодовую базу (весь код во всех файлах) с помощью ⌘+ ⌥+ Fили:

и поиск #envioили любой другой тег / класс / идентификатор, который, по вашему мнению, запускает вечеринку, и вы можете добраться куда-то быстрее, чем предполагалось

Имейте в виду, что иногда не только imgмного элементов, но и вы можете не знать, какой из них запускает код.

Если вам это немного не по вкусу, посмотрите учебник Chrome по отладке .

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

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

Вы можете использовать findHandlersJS

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

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

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

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

Больше информации здесь, и вы можете попробовать это в этом примере сайта здесь .

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

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

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

Интересный момент по такому ответу :

Начиная с jQuery 1.8, данные событий больше не доступны из «публичного API» для данных. Прочитайте этот пост в блоге jQuery . Теперь вы должны использовать это вместо:

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

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

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

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

Версия JQuery не зависит от версии: (jQuery._data || jQuery.data)(elem, 'events');