![](https://habrastorage.org/storage2/a47/999/00e/a4799900eea6c8e0eddf1e6c584bc5ec.png)
Клиентского кода в веб-приложениях с каждым годом действительно становится все больше. Подчас это десятки файлов с сотнями функций. И что делать, когда нам нужно поменять код, выполняемый по событию (например, клик по ссылке). Как его найти? Задавшись решением этой задачи, я придумал несколько разных вариантов. Каждый из них имеет свои плюсы и минусы. И в конце статьи я предлагаю метод, который мне кажется оптимальным.
Формулировка задачи
Сразу скажу, заголовок отражает суть вопроса: мы ищем обработчик события, который был добавлен с использованием библиотеки jQuery, которая сейчас очень популярна. Для демонстрации вариантов решения мы будем использовать Инструменты Разработчика Google Chrome, так как они предоставляют некоторые продвинутые возможности, которых нет в консолях других браузеров. Без этих фишек некоторые варианты решения не представляются возможными вообще.
Подопытный кролик
![](https://habrastorage.org/storage2/f87/17e/28b/f8717e28bc5a78ffaafa5d8385d631ea.png)
Метод №1
![](https://habrastorage.org/storage2/983/326/6e1/9833266e1450aff48a32a2c62e455eb9.png)
![](https://habrastorage.org/storage2/3e1/56a/515/3e156a515eaeccd1cf2863eec8648211.png)
Достоинства
- в простых случаях это работает
Недостатки
- если используется jQuery, этот способ малоэффективен
- если обработчик вешается через live(), то он просто не покажется в списке
Поставим брейкпойнт на событие
![](https://habrastorage.org/storage2/b7e/7d2/f9c/b7e7d2f9c325c050ed3e37081a149d58.png)
![](https://habrastorage.org/storage2/e11/6f7/7e6/e116f77e6bed4358957b662389a203fb.png)
Достоинства
- иногда срабатывает
Недостатки
- в этот раз не сработало
- если обработчиков навешано несколько, мы сможем отловить только первый из них, остальные мы так и не найдем
Если мы что-то знаем
![](https://habrastorage.org/storage2/94f/249/7d3/94f2497d38d7d28a5103c014139605a3.png)
Достоинства
- быстрота получения решения
Недостатки
- применить можно далеко не всегда, решение не универсально
Используем расширение Chrome
![](https://habrastorage.org/storage2/ee0/703/eed/ee0703eed0feb58da816e4f5b467f27d.png)
Достоинства
- очень просто использовать
- показывает все, что нужно
Недостатки
- нужно дополнительно что-то устанавливать
- на страницах со сложной версткой многие иконки окажутся просто недоступными для просмотра
- задача все-таки не решается до конца: код-то мы увидели, но в каком файле и на какой строке он находится, мы не знаем
Можно обойтись и без расширения
Тру-хакерам достаточно в консоли Javascript написать $(selector).data('events') и можно увидеть все обработчики, прицепленные к элементу. Если обработчик вешается через live(), то нужно вывести $(document).data('events') и поискать в списке искомый. Однако, как и в случае с расширением, этот метод не решает задачу до конца, и при этом нужно довольно долго искать нужный обработчик.
Наконец-то
![](https://habrastorage.org/storage2/39c/c25/cdf/39cc25cdfccb5b9f3eb0d463a856ee3a.png)
- Открываем Инструменты Разработчика Google Chrome (F12), выбираем вкладку «Scripts» и находим в выпадающем списке скрипт jQuery.
- Щелкаем кнопочку «Pretty print» для эстетики.
- Находим обработчик событий jQuery введя в поиске «handle:». Двоеточие в конце ставится для того, чтобы сразу перейти к объявлению функции. В более новых версиях библиотеки эта функция называется dispatch, но не суть. Эта функция является точкой, через которую проходят все назначенные события. Там хватает кода, нам важна строка, где есть вызов apply — это по сути и есть вызов нашего искомого куска кода.
- Событий через функцию проходит много, поэтому ставим не обычный брейкпойнт, а условный. Первым параметром функции является объект события, поэтому пишем «arguments[0].type=='click'».
- Кликаем по ссылке и срабатывает брейкпойнт на нашей строчке.
- Чтобы перейти к искомому куску кода, жмем «Step into next function call» (F11). Вуаля! Мы не только нашли нужный кусок кода, мы еще и знаем теперь в каком файле и на какой строчке он находится. Задача решена. Прекрасно.
- Если обработчиков несколько, последовательно нажимая F8 F11, добираемся до нужного.
Достоинства
- действительно решает поставленную задачу
- задача решается стандартными инструментами
- метод универсальный
Недостатки
- мозг должен быть включенным