Ответ 1

Решение 1. Фреймворк для чёрного ящика

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

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

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

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

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

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 bookmarklet с открытым исходным кодом, который обеспечивает отладочная информация о событиях, которые были прикреплены к 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.

Ответ 2

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

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

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

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

• Откройте Chrome Dev Tools (F12) и перейдите на вкладку "Источники".
• Прокрутите до мыши → Нажмите кнопку < ш > (нажмите, чтобы увеличить)

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

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

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

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

Теперь трюк здесь - не увлекаться нажатием клавиши и следить за ним на экране.

• Нажмите клавишу F11 (Step In), пока не появится нужный исходный код
• Окончательный исходный код
  • В приведенном выше примере 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. Вот ответ fooobar.com/questions/30983/..., объясняющий различия.

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

Ответ 3

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

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

Ответ 4

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

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

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

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

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

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

Ответ 5

Для этого решения требуется метод данных jQuery.

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

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

Интересный пункт this SO answer:

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

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

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

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

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

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