JavaScript / jQuery hadisə bağlamalarını Firebug və ya oxşar alətlər üçün necə debug etmək olar?

JQuery istifadə edən bir web tətbiqini daha kompleks və düzensiz DOM yerinə yetirmək üçün diskarifikasiya etmək lazımdır. Bəzi nöqtələrdə bəzi konkret elementlərlə əlaqəli hadisələrin başlanğıcı və işi dayandırmaq olmaz.

Ərizənin mənbəyini redaktə etmək imkanına malik olsaydım, problemi müəyyən etməyə çalışmaq üçün birbaşa Firebug console.log() ifadələri və comment / not kod parçaları əlavə etdim və əlavə edərdim. Ancaq deyək ki, ərizə kodunu düzəldə bilmirəm və Firefox-da Firebug və ya oxşar alətlərdən istifadə edərək tamamilə işləməliyəm.

Firebug mənim DOM-a getmək və manipulyasiya etməyə icazə verərkən çox yaxşıdır. Ancaq indiyə qədər, mən Firebug istifadə edərək hadisələrin necə səhv olduğunu anlaya bilmədim. Xüsusilə, müəyyən bir nöqtədə müəyyən bir maddə ilə əlaqəli hadisə işləyicilərinin siyahısını (zaman dəyişikliklərini izləmək üçün Firebug JavaScript keçid məntəqələrini istifadə edərək) görmək istəyirəm. Amma Firebug'un əlaqəli hadisələri görmək qabiliyyəti yoxdur və ya tapmaq üçün çox axmaq deyiləm: -)

Hər hansı tövsiyə və ya fikir? İdeal olaraq, bu gün DOM'u düzəldə biləcəyim kimi elementlər ilə bağlı hadisələri görmək və düzəltmək istəyirəm.

592
20 февр. Yanan tərəfindən fevralın 20-də təyin olundu 2009-02-20 22:42 '09 da saat 22:42 'da 2009-02-20 22:42
@ 16 cavab

Bir DOM node-da hadisə dinləyicilərini necə tapmaq olar .

Əlavə olaraq, bir məqamda bir hadisə işleyiciniz elementinizə (məsələn) əlavə olunduğunu fərz etsək: $('#foo').click(function() { console.log('clicked!') });

Bunu aşağıdakı kimi yoxlayın:

  • jQuery 1.3.x

     var clickEvents = $('#foo').data("events").click; jQuery.each(clickEvents, function(key, value) { console.log(value) // prints "function() { console.log('clicked!') }" }) 
  • jQuery 1.4.x

     var clickEvents = $('#foo').data("events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }" }) 

jQuery.fn.data (burada jQuery sizin jQuery.fn.data içərisində jQuery.fn.data baxın).

  • jQuery 1.8.x

     var clickEvents = $._data($('#foo')[0], "events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }" }) 
349
20 февр. cavab Crescent Fresh 20 feb verilir. 2009-02-20 23:21 '09 saat 23:21 'da 2009-02-20 23:21

Maddə ilə əlaqəli bütün hadisələri göstərə biləcək Visual Event adlı gözəl bir bookmarklet var. Müxtəlif növ hadisələr (siçan, klaviatura və s.) Üçün rəngli işıqlar var. Onların üstünə getdiyiniz zaman, hadisənin işləyicisinin cismini, onun bağlanmasını və fayl / satırın nömrəsini (WebKit və Opera) göstərir. Həm də hadisəni əl ilə tetikleyebilirsiniz.

border=0

Hər bir hadisə tapa bilmir, çünki bir hadisə ilə işləyənlərin hansı elementə yerləşdirildiyini tapmaq üçün standart bir yol yoxdur, ancaq jQuery, Prototype, MooTools, YUI və s. Kimi məşhur kitabxanalarda işləyir.

162
20 февр. Matthew Crumley tərəfindən 20 Fevralda verilən cavab . 2009-02-20 22:52 '09 at 10:52 AM 2009-02-20 22:52

Eventbug uzantısı dünən buraxıldı; bax: http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

73
30 окт. Cavab oktyabrın 30-da Jan Odvarkoya verilir . 2009-10-30 15:05 '09 saat 15:05 'da 2009-10-30 15:05

FireQuery istifadə edə bilərsiniz. Firebug HTML sekmesindeki DOM elementləri ilə əlaqəli hər hansı bir hadisəni göstərir. Bu, $.data vasitəsilə elementlərə əlavə edilmiş hər hansı məlumatları göstərir.

41
07 окт. Şikant Sharat tərəfindən verilmiş cavab 07 oktyabr 2009-10-07 06:26 '09 saat 06:26 'da 2009-10-07 06:26

Hər hansı bir element / hadisə üçün bütün hadisə işləyicilərini göstərə biləcək bir plugin:

 $.fn.listHandlers = function(events, outputFunction) { return this.each(function(i){ var elem = this, dEvents = $(this).data('events'); if (!dEvents) {return;} $.each(dEvents, function(name, handler){ if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) { $.each(handler, function(i,handler){ outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler ); }); } }); }); }; 

Aşağıdakı kimi istifadə edin:

 // List all onclick handlers of all anchor elements: $('a').listHandlers('onclick', console.info); // List all handlers for all events of all elements: $('*').listHandlers('*', console.info); // Write a custom output function: $('#whatever').listHandlers('click',function(element,data){ $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>'); }); 

Src: (mənim blogum) → http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

26
21 февр. Cavab Ceyms 21 fevralda verilir. 2009-02-21 00:04 '09 at 0:04 2009-02-21 00:04

WebKit Geliştirici Konsolu (Chrome, Safari və s. Daxilində) əlavə tədbirləri maddələr üçün keçirmək imkanı verir.

Bu daşqın yığınına dair daha çox məlumat.

22
21 авг. cavab Cristian Sanchez 21 avqustda verilir. 2010-08-21 21:21 '10 at 21:21 2010-08-21 21:21

$._data(htmlElement, "events") 1.7 + ilə $._data(htmlElement, "events") istifadə edin;

Məsələn:

$._data(document, "events") və ya $._data($('.class_name').get(0), "events")

11
20 авг. Cavab Tamás Pap 20 avqustda verilir. 2012-08-20 18:12 '12 at 6:12 pm 2012-08-20 18:12

Bir həmkarı kimi, console.log> alert:

 var clickEvents = $('#foo').data("events").click; jQuery.each(clickEvents, function(key, value) { console.log(value); }) 
8
18 нояб. Cavab 18 noyabr tarixində Flevour tərəfindən verilmişdir. 2009-11-18 19:31 '09 da 19:31 'da 2009-11-18 19:31

jQuery aşağıdakı hadisələri saxlayır:

 $("a#somefoo").data("events") 

console.log($("a#somefoo").data("events")) bu elementlə əlaqəli hadisələrin siyahısını ehtiva etməlidir.

6
20 февр. Alex Heyd tərəfindən verilmiş cavab 20 fevral 2009-02-20 23:12 '09 da 23:12 'də 2009-02-20 23:12

DevTools'u son Chrome-da (v29) istifadə edərək, bu iki ipucu hadisələri pozmaq üçün çox faydalıdır:

  1. Son seçilmiş DOM elementi üçün JQuery hadisə siyahısı

    • Maddə səhifədə yoxlayın
    • Konsolda aşağıdakıları yazın:

      $ ._ data ( $ 0 , "hadisələr") // jQuery qəbul edin. 7+

    • Bununla əlaqəli bütün jQuery hadisə obyektlərini siyahıya alacaq, faiz hadisəsini genişləndirəcək, işəgötürən əmlakının funksiyasını sağ-klikləyin və Function Definition Göstərini Göstər seçin. Göstərilən funksiyanı olan faylını açacaqdır.
  2. MonitorEvents () əmrini istifadə edin

5
04 сент. cavab mateuscb 04 sep verilir . 2013-09-04 01:49 '13 at 1:49 2013-09-04 01:49

FireBug komandası bir EventBug uzantısında çalışır kimi görünür. FireBug - Hadisələrə bir panel əlavə edəcək.

Tədbir bölməsi, bütün hadisə işleyicilerini hadisə növü ilə qruplaşdırılmış bir səhifədə göstərəcəkdir. Hər bir hadisə növü üçün, dinləyicilərin yerləşdiyi elementləri və funksiyanın qaynağının xülasəsini görmək üçün aça bilərsiniz. " EventBug Rising

Onlar sərbəst buraxılmaq üçün indi də deyə bilməyəcəklər.

4
28 окт. jayarjo tərəfindən cavabı Oct 28 2009-10-28 16:35 '09 'da 16:35' da 2009-10-28 16:35 'da

Ayrıca jQuery Debugger'ı xrom deposunda tapdım. Domen elemanını tıklayarak geri çağırma funksiyası ilə əlaqəli bütün hadisələri göstərə bilərsiniz. Hadisələrin düzgün silinməyəcəyi bir proqramı düzəldirdim və bir neçə dəqiqə ərzində onu izləyə bildim. Aydındır ki, bu xrom üçün deyil, firefox üçün deyil.

4
27 апр. cavab 27 Martda Rob tərəfindən verilir 2012-04-27 19:15 '12 saat 19:15 'da 2012-04-27 19:15

öğelerin yanında ev simgesi

Firefox Developer Tools Inspector panel bir maddə ilə əlaqəli bütün hadisələri siyahıya alır.

Əvvəl Ctrl + Shift + C istifadə edərək bir element seçin, məsələn, bir ox.

Öğenin sağ tərəfindəki ev simgesini basın və informasiya açılır:

2019

17 нояб. Ciro Santilli tərəfindən verilmiş cavab 改造 改造 中心 六四 事件 法站 kab 17 noyabr 2015-11-17 13:40 '15 saat 13:40 'da

Bu mövzuya görə, Firebug-da DOM Element-də dinləyicilərə hansı hadisələrin əlaqəli olduğunu görmək mümkün deyil.

Göründüyü kimi ən yaxşı şey tj111 təklif edir və ya HTML görüntüleyicisindeki bir öğeyi sağ tıklayıp "Giriş Etkinlikleri" ni tıklayarak müəyyən bir DOM elementi üçün hansı etkinliklerin tetiklendiğini görebilirsiniz. İnanıram ki, hansı hadisələr müəyyən funksiyaları atəşə verə biləcəyini öyrənmək üçün bunu edə bilər.

3
20 февр. Daniel Lew tərəfindən 20 Fevralda cavab verildi 2009-02-20 23:03 '09 at 11:03 PM 2009-02-20 23:03

Versiya 2.0 ilə Firebug HTML panelində seçilmiş elementin bütün hadisələrini siyahıya alan bir hadisə panelini təqdim etdi .

2019

16 янв. Sebastian Zartner tərəfindən verilmiş cavab 16 yanvar 2015-01-16 01:33 '15 at 1:33 'de 2015-01-16 01:33

Firebug 2, DOM hadisələrini ayıklama / yoxlama ehtiva edir.

0
11 июня '14 в 17:33 2014-06-11 17:33 Cavab MRalwasser tərəfindən 11 iyun '14 'də 17:33 2014-06-11 17:33 ' də verilir

tags ilə bağlı digər suallar və ya bir sual