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

305

Я использую 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, в свою очередь, проходит через некоторые уровни абстракции и проверки, и где-то там она выполняет вашу функцию «.


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

Карлес Алколея
источник
4
Я обычно использую Visual Eventбукмарклет. Он обнаруживает события кликов, привязанные популярными библиотеками, и создает наложение сайта, показывающее, где связаны события, и дает примеры кода и исходные местоположения для каждого события.
Кевин Б.
3
@DontVoteMeDown Но это побеждает весь вопрос. Предположим, у меня есть десятки файлов * .js на веб-сайте. Откуда вы знаете, что код, который вызывается кнопкой, находится внутри jquery2.js?
Карлес Алколея,
1
Я понимаю, как работает Visual Event (спасибо вам, кстати), но когда вы нажимаете эту кнопку, ваш браузер прекрасно знает, что нужно запускать , потому что он его запускает. Я просто хочу убедиться, что это невозможно сделать с помощью инструментов разработчика, и я буду двигаться дальше.
Карлес Алколея,
1
Хороший вопрос, я определенно думаю, что это функция, которую должен иметь Chrome (или Firefox)
tomysshadow
1
Если вы нашли ответ на этот вопрос, пожалуйста, добавьте его в качестве ответа. Отвечать на ваш собственный вопрос очень рекомендуется, но отвечать на него, редактируя ваш вопрос, нет.
Парень в шляпе

Ответы:

209

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

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


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

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

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

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

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

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

Джесси
источник
Вау, ты и @ Александр-Павлов совершенно правы, я пропустил это. Теперь я только что попробовал еще раз, и мне потребовалось 132 F11 ключевых удара! Теперь это имеет смысл, но это просто непрактично. Я исправлю свой вопрос, хотя.
Carles Alcolea
@CarlesAlcolea Yup - это абсолютно непрактично, но не невозможно. Любой, у кого достаточно преданности и времени, может найти что-нибудь сделанное в HTML и JavaScript, даже если его спрятать и минимизировать. Не стесняйтесь отмечать ответ Александра Павлова или мой, как принятый.
Джесси
1
да, я сейчас заканчиваю. К вашему сведению, если вы еще этого не знали, если вы нажмете кнопку фигурных скобок внизу слева ( i.imgur.com/ALoMQkR.png ) на минимизированном скрипте, он «украсит» его и будет работать и во время отладки.
Карлес Алколея,
С 2014 года в Chrome Dev Tools встроена функция черного ящика, которая устраняет необходимость в № 1 выше.
Брайан
1
@ Брайан, а вот и блог, в котором подробно рассказывается о сценариях черного бокса .
Кристиан Дьяконеску
157

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

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

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

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

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

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

введите описание изображения здесь

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

Карлес Алколея
источник
Не смог найти нигде черный ящик? Попробуйте: chrome: // flags / # enable-devtools-эксперименты
ruuter
1
@CarlesAlcolea УДИВИТЕЛЬНЫЙ !! Вы только что сэкономили мне тонны времени с помощью этого трюка!
Prix
Кто-нибудь знает, почему при запуске визуального события страница обновляется сама, теряя при этом всю информацию?
Эду Кастрильон
Для решения 1 вам нужно будет щелкнуть по эллипсу в дальнем правом углу, чтобы получить доступ к настройкам FULL CHROME DEVTOOLS, или нажать F1, когда DevTools открыт. Теперь вы увидите BlackBoxing как вкладку с левой стороны. Наслаждайтесь!
Pensebien
1
Похоже, что новый лучший способ создания сценариев для «черного ящика» удивительно прост. Просто перейдите к этому файлу на панели «Источники» и щелкните правой кнопкой мыши В файле (не ВКЛЮЧИТЕ его элемент списка слева, фактически откройте файл и щелкните правой кнопкой мыши В файле), затем просто выберите «Blackbox this script». Вот и вы!
Дан
17

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

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

Александр Павлов
источник
Это отлично работает (и вы правы, я пропустил в прыжке), я добавлю его к моему вопросу. Это также заставило меня перечитать шаблоны регулярных выражений снова: P Спасибо.
Карлес Алколея,
7

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

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

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

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

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

  • список целей с элементами, на которые нацелен этот обработчик событий. Например, для делегированного обработчика событий, который зарегистрирован в объекте документа и предназначается для всех кнопок на странице, это свойство будет перечислять все кнопки на странице. Вы можете навести их и увидеть, что они выделены хромом.

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

Руи
источник
3

Это решение нуждается в методе данных 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');

apptaro
источник
2
Спасибо, что добавили больше идей. Это еще один способ сделать это. Недостатком является необходимость в jQuery, и в заголовке этого вопроса говорится только о инструментах Chrome. Я отредактирую ваш ответ, чтобы было понятно, что это метод jQuery, а также что-то более разумное, чем «ЛУЧШЕЕ РЕШЕНИЕ ВЕЗДЕ» :) Пожалуйста, посмотрите на stackoverflow.com/help/how-to-answer
Carles Alcolea