Поймать определенный код JavaScript, выполняемый на клике

Question

Я работаю над сайтом, на котором есть множество устаревших javascript и jquery, и нет документации, чтобы показать, что происходит, когда.

У меня есть конкретная проблема, которую нужно исправить, и я не могу найти соответствующий код, который выполняется при нажатии кнопки. Чтобы уберечь меня от прохождения (и осмысления) сотен строк унаследованного скрипта, есть ли возможность, возможно, в Firebug, которая будет определять, какой скрипт выполняется при нажатии на кнопку?

Спасибо за вашу помощь.

Answer 1

Я полагаю, что в консольном окне Firebug есть функция Profile. Нажмите профиль, нажмите кнопку, затем нажмите профиль еще раз. Это должно дать вам то, что все функции были вызваны в то время. Имейте в виду, что если этот код включает в себя jQuery, вы можете получить огромный длинный список функций, потому что jQuery использует тонны в своем коде. К сожалению, профилировщик также покажет анонимные функции, которые действительно могут быть неприятны.

В противном случае выполните поиск в коде класса кнопки или идентификатора кнопки и просмотрите их. Если у вас есть идентификатор fancy, то вы можете выполнить поиск для #fancy в своем коде и попытаться найти его. Это может привести вас в общем направлении, по крайней мере.

Answer 2

Вы можете нажать кнопку Firebug «Break on next» (на вкладке «Сценарий»; она выглядит как кнопка паузы), а затем нажать кнопку, которую вы хотите отладить.

В следующий раз при выполнении любого кода JavaScript Firebug взломает отладчик и покажет вам эту строку кода.

Answer 3

Ни один из приведенных выше ответов не работал для меня. Я пытаюсь использовать Firebug, чтобы выяснить, как функция на странице работает для сайта, который я не могу контролировать. Вот что сработало для меня.

Сначала получите идентификатор элемента, на который я нажимаю, из источника страницы, а затем получите временную ссылку на него, создав часы (на вкладке скрипта):

tmp=document.getElementById("idOfElement")

Затем я присвоил текущее значение onclick другой временной переменной.

oldfunc=tmp.onclick

Затем я определил новую функцию onclick. Первоначально я попытался поставить debugger; в качестве первой функции, но это не работает! Поэтому вместо этого я создал предупреждение:

tmp.onclick = function() { alert("Ok"); oldfunc() }

Теперь, как только я нажимаю на кнопку, появляется предупреждение, и в этот момент я нажимаю кнопку «Перерыв в следующем», как указано в другом ответе на этот вопрос. Затем я отклоняю предупреждение и сразу нахожусь в отладчике в правильном месте.

В моем случае кнопка «Разорвать дальше» не сработала сама по себе, потому что есть много других событий, просто наведение курсора на страницу вызывало срабатывание точки останова, не позволяя мне нажимать кнопку.

Answer 4

Кнопка перерыва не работает для меня. Вместо этого я отредактировал атрибут onclick с помощью FireBug и добавил к нему «debugger»; ... тогда вы сразу сломаете, как только нажмете:)

Answer 5

В Firebug вы можете установить точку останова в некотором JS, а затем вы получите стек, который даст вам знать текущий стек вызовов функций. Поэтому, если вы установите точку останова в функции, используемой несколькими обработчиками, вы можете использовать ее, чтобы точно определить, в каком обработчике вы находитесь.

Это, вероятно, не сработает, если вы имеете дело с обратными вызовами AJAX и тому подобное.