Отладка событий JavaScript с помощью Firebug

Question

Мне нужно установить точку останова для определенного события, но я не знаю, где оно определено, потому что у меня есть гигантская куча свернутого кода JavaScript, поэтому я не могу найти его вручную.

Можно ли как-то установить точку останова, например, для события щелчка элемента с идентификатором registerButton, или найти где-нибудь, какая функция связана с этим событием?

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

Есть ли отладчик, созданный специально для jQuery ?

Кто-нибудь знает какой-нибудь инструмент, который превращает минимизированный JavaScript обратно в отформатированный код, похожий на function(){alert("aaa");v=3;} обратно в

function() {
   alert("aaa");
   v = 3;
}

Answer 1

Ну, это может быть слишком много проблем, чем стоит, но похоже, у вас есть три дела:

1. Отключение источника. Мне нравится этот онлайн-инструмент для быстрого и грязного. Просто вставьте свой код и нажмите кнопку. Никогда не подводил меня, даже на самом веселом из JavaScript.

2. Все связыватели событий jQuery направляются на "jQuery.event.add" ( вот как это выглядит в не построенном источнике ), поэтому вам нужно найти этот метод и установить Точка останова там.

3. Если вы зашли так далеко, все, что вам нужно сделать, - это проверить стеки вызовов в точке останова, чтобы узнать, кто и что вызвал. Обратите внимание, что, поскольку вы находитесь во внутренней части библиотеки, вам нужно проверить несколько выпусков (поскольку код, вызывающий "jQuery.event.add", скорее всего, был просто другими функциями jQuery).

Обратите внимание, что 3) требуется Firebug для FF3. Если вы похожи на меня и предпочитаете отлаживать Firebug для FF2, вы можете использовать старый метод arguments.callee.caller.toString() для проверки стека вызовов, вставляя столько ".caller, сколько необходимо.

---

Редактировать : Также см. "Как отлаживать привязки событий Javascript / jQuery с помощью FireBug (или аналогичного инструмента)" .

Вы можете сойти с рук:

// inspect    
var clickEvents = jQuery.data($('#foo').get(0), "events").click;
jQuery.each(clickEvents, function(key, value) {
    alert(value) // alerts function body
})

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

Answer 2

Сначала замените минимизированный jquery или любой другой источник, который вы используете, на форматированный. Еще один полезный трюк, который я нашел, - использование профилировщика в firebug. Профилировщик показывает, какие функции выполняются, и вы можете щелкнуть одну из них и перейти к ней, чтобы установить точку останова.

Answer 3

Просто обновление:

Google Chrome (инструменты dev в нем) поддерживают все виды точек останова, а также break в Event .

Все события вместе с ориентацией устройства изменениями и таймерами

Вы можете посмотреть видео с презентацией всех возможностей Google IO .

Также имеется встроенный деминификатор / unminimizer / prettifier , который поможет вам вручную устанавливать точки останова для сжатых файлов JavaScript.

Answer 4

Еще одно обновление: теперь есть расширение firebug, которое украшает JavaScript:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

Он отлично работает для меня в Firefox 12.0.

Кредит на этот ответ за то, что он его заметил.

Answer 5

Что вы можете сделать, это получить минимизированный код - у вас будет доступ к нему. Снимите код в соответствии с параметром (1) Crescent Fresh или любым другим способом, который вы предпочитаете.

Затем скачайте и установите Fiddler - на всех веб-разработчиках должен быть установлен этот невероятный инструмент.

Затем, используя Fiddler, вы можете перехватить вызов браузера для файла minified.js с локальным unminified.js, который есть на вашем локальном диске.

Fiddler в основном перехватывает запрос вашего браузера на определенный файл и может подать другой файл в ваш браузер. Теперь вы можете посмотреть на не минимизированный код.

Easy.

Другой вариант - использовать Firefox и установить на него отладчик Venkman - намного лучше, чем Firebug IMHO - и отладчик Venkman имеет опцию «довольно печати», которая может визуально деиницифицировать минимизированный код во время выполнения. Прикрепите точку останова, где хотите, сейчас ...

Answer 6

Это сделает работу. http://jsbeautifier.org/ Вы также можете выполнить поиск в Google, чтобы найти более красивый javascript.

Answer 7

найти линию и установить точку останова. Затем перезагрузите сайт / страницу. Затем firebug автоматически приостановит выполнение оператора при достижении точки останова.

Answer 8

Вы можете использовать команду debugger в любом месте файла JavaScript. Когда интерпретатор достигает этого положения, если доступен отладчик (например, Firebug), он срабатывает