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

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

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

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

есть ли отладчик специально для jQuery?

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

function() {
   alert("aaa");
   v = 3;
}
22
debugging firebug javascript jquery

8 ответов

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

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

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

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

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

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

вы можете быть в состоянии уйти с:

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

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

16

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

4

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

Google Chrome (the dev tools В) все точки останова, вместе с перерыв на событие.

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

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

там также встроенный deminifier/ unminimizer/ prettifier который поможет вам установить точки останова вручную на сжатых файлах javascript.

3

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

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

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

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

легко.

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

1

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

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

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

кредит на этот ответ для наблюдения за ним.

1

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

0

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

0

Это сделает работу. http://jsbeautifier.org/ Вы также можете искать Google для JavaScript beautifier.

0