Я использую 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, в свою очередь, проходит через некоторые уровни абстракции и проверки, и где-то там она выполняет вашу функцию «.
Как предположили некоторые из вас, я собрал методы, которые работали в одном ответе ниже .
источник
Visual Event
букмарклет. Он обнаруживает события кликов, привязанные популярными библиотеками, и создает наложение сайта, показывающее, где связаны события, и дает примеры кода и исходные местоположения для каждого события.Ответы:
Ответ Александра Павлова получается ближе всего к тому, что вы хотите.
Из-за обширной абстракции и функциональности jQuery необходимо прыгнуть через множество обручей, чтобы добраться до сути события. Я настроил этот jsFiddle, чтобы продемонстрировать работу.
1. Настройка точки останова прослушивателя событий
Вы были близки к этому.
2. Нажмите на кнопку!
Chrome Dev Tools приостановит выполнение скрипта и представит вам эту красивую запутанность минимизированного кода:
(нажмите, чтобы увеличить)
3. Найдите славный код!
Хитрость заключается в том, чтобы не увлекаться нажатием клавиши, а следить за экраном.
4. Объяснение
У меня нет точного ответа или объяснения того, почему jQuery проходит через множество слоев абстракций, которые он делает - все, что я могу предложить, это то, что он выполняет свою работу, чтобы абстрагироваться от использования браузера, выполняющего код ,
Вот jsFiddle с отладочной версией jQuery (т.е. не минифицированной). Когда вы посмотрите на код первой (не минифицированной) точки останова, вы увидите, что код обрабатывает много вещей:
Я думаю, что причина, по которой вы пропустили эту попытку, когда « выполнение приостанавливается, и я скачу строка за строкой », заключается в том, что вы, возможно, использовали функцию «Step Over» вместо Step In. Вот ответ StackOverflow, объясняющий различия.
Наконец, причина, по которой ваша функция не связана напрямую с обработчиком события click, заключается в том, что jQuery возвращает функцию, которая становится связанной. Функция jQuery, в свою очередь, проходит через некоторые уровни абстракций и проверок, и где-то там она выполняет вашу функцию.
источник
F11
ключевых удара! Теперь это имеет смысл, но это просто непрактично. Я исправлю свой вопрос, хотя.Решение 1: фреймворк блэкбоксинга
Прекрасно работает, минимальная настройка и никаких третьих лиц.
Согласно документации Chrome :
Вот обновленный рабочий процесс:jquery\..*\.js
(Глоб шаблон / человек перевод:jquery.*.js
)|
, например:jquery\..*\.js|include\.postload\.js
(который действует как «или этот шаблон», так сказать. Или продолжайте добавлять их с помощью кнопки «Добавить»).Вы также можете использовать контекстное меню при работе на панели источников. При просмотре файла вы можете щелкнуть правой кнопкой мыши в редакторе и выбрать Blackbox Script. Это добавит файл в список на панели настроек:
Решение 2. Визуальное событие
Это отличный инструмент, чтобы иметь :
Решение 3: отладка
Вы можете приостановить код, когда щелкаете где-то на странице или когда изменяется DOM ... и другие виды точек останова JS, которые будет полезно знать. Вы должны применить черный ящик здесь, чтобы избежать кошмара.
В этом случае я хочу знать, что именно происходит, когда я нажимаю кнопку.
Откройте Dev Tools -> вкладку Sources и справа найдите
Event Listener Breakpoints
:Разверните
Mouse
и выберитеclick
Решение 4: Ключевые слова для рыбалки
С активированными Dev Tools вы можете искать всю кодовую базу (весь код во всех файлах) с помощью ⌘+ ⌥+ Fили:
и поиск
#envio
или любой другой тег / класс / идентификатор, который, по вашему мнению, запускает вечеринку, и вы можете добраться куда-то быстрее, чем предполагалосьИмейте в виду, что иногда не только
img
много элементов, но и вы можете не знать, какой из них запускает код.Если вам это немного не по вкусу, посмотрите учебник Chrome по отладке .
источник
Похоже, что "... и я прыгаю строка за строкой ..." неправильно. Вы StepOver или StepIn и уверены, что случайно не пропустили соответствующий звонок?
Тем не менее, отладочные фреймворки могут быть утомительными именно по этой причине. Чтобы устранить проблему, вы можете включить эксперимент «Включить поддержку отладки фреймворков» . Удачной отладки! :)
источник
Вы можете использовать findHandlersJS
Вы можете найти обработчик, выполнив в консоли Chrome:
findEventHandlers("click", "img.envio")
Вы получите следующую информацию, напечатанную в консоли Chrome:
Фактический элемент, в котором обработчик события был зарегистрирован в
Массив с информацией об обработчиках событий jquery для интересующего нас типа события (например, щелчок, изменение и т. д.)
Фактический метод обработчика событий, который вы можете увидеть, щелкнув его правой кнопкой мыши и выбрав Показать определение функции
Селектор, предназначенный для делегированных событий. Для прямых событий будет пусто.
список целей с элементами, на которые нацелен этот обработчик событий. Например, для делегированного обработчика событий, который зарегистрирован в объекте документа и предназначается для всех кнопок на странице, это свойство будет перечислять все кнопки на странице. Вы можете навести их и увидеть, что они выделены хромом.
Больше информации здесь, и вы можете попробовать это в этом примере сайта здесь .
источник
Это решение нуждается в методе данных jQuery .
$._data($(".example").get(0), "events")
$._data()
просто получает доступ к методу данных jQuery. Более читаемой альтернативой может бытьjQuery._data()
.Интересный момент по такому ответу :
Версия JQuery не зависит от версии:
(jQuery._data || jQuery.data)(elem, 'events');
источник