कैसे Firebug या इसी तरह के उपकरणों के साथ जावास्क्रिप्ट / jQuery घटना बाइंडिंग डिबग करने के लिए?

609

मुझे एक वेब एप्लिकेशन को डिबग करने की आवश्यकता है जो कुछ काफी जटिल और गड़बड़ डोम हेरफेर करने के लिए jQuery का उपयोग करता है। एक बिंदु पर, कुछ घटनाएं जो विशेष तत्वों से जुड़ी थीं, उन्हें निकाल नहीं दिया जाता है और बस काम करना बंद कर दिया जाता है।

अगर मैं संपादित करने के लिए एक क्षमता आवेदन स्रोत था, मैं विस्तार में जाकर का एक समूह जोड़ना होगा Firebug console.log() समस्या इंगित करने के लिए प्रयास करने के लिए बयान और कोड की टिप्पणी / टिप्पणी हटाएं टुकड़े। लेकिन मान लेते हैं कि मैं एप्लिकेशन कोड को संपादित नहीं कर सकता और फायरबग या इसी तरह के उपकरणों का उपयोग करके फ़ायरफ़ॉक्स में पूरी तरह से काम करने की आवश्यकता है।

फ़ायरबग मुझे नेविगेट करने और डोम में हेरफेर करने में बहुत अच्छा है। अब तक, हालांकि, मुझे यह पता नहीं चल पाया है कि फायरबग के साथ इवेंट डीबगिंग कैसे करें। विशेष रूप से, मैं बस एक निश्चित समय में किसी विशेष तत्व से जुड़े इवेंट हैंडलर की एक सूची देखना चाहता हूं (परिवर्तनों का पता लगाने के लिए फायरबग जावास्क्रिप्ट ब्रेकप्वाइंट का उपयोग करके)। लेकिन या तो फायरबग में बाध्य घटनाओं को देखने की क्षमता नहीं है, या मैं इसे खोजने के लिए बहुत बेवकूफ हूं। :-)

कोई सिफारिश या विचार? आदर्श रूप से, मैं बस तत्वों से जुड़ी घटनाओं को देखना और संपादित करना चाहूंगा, इसी तरह मैं आज डोम को कैसे संपादित कर सकता हूं।

— Jaanus
स्रोत

355

डोम नोड पर घटना श्रोताओं को खोजने के लिए देखें ।

संक्षेप में, कुछ बिंदु पर एक घटना हैंडलर अपने तत्व से जुड़ा हुआ है (जैसे): $('#foo').click(function() { console.log('clicked!') });

आप इसका निरीक्षण इस तरह करते हैं:

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(जहां jQuery अपने हैंडलर को आंतरिक रूप से संग्रहीत करता है)।

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!') }"
})

— वर्धमान ताजा
स्रोत

21

FYI करें: यह उन घटनाओं को प्रदर्शित नहीं करेगा जो jQuery के साथ संलग्न नहीं थे

— जुआन मेंडेस

10

कंसोल के बारे में पूरी तरह से सहमत हैं if (window.console)।

— thepeer

14

@ निजी तौर पर मैं फ़ाइल की शुरुआत में कंसोल के लिए एक चेक करना पसंद करता हूं, और अगर यह मौजूद नहीं है तो डमी ऑब्जेक्ट बनाएं।

— एंड्रयू

नीचे सभी घटनाओं को डीबग करने के लिए एक समान स्निपेट है (कृपया प्रारूपण की कमी का बहाना करें):

$('#foo').click(function(event) {         var events = $(this).data('events');         $.each(events, function(event, handlers) {             $.each(handlers, function(key, handlerObj) {                 console.log("--------------------------------------");                 console.log(event+"["+key+"] | "+handlerObj.handler) ;             });         });

— कोरी ओ।

3

@ BrainSlugs83: इस उत्तर में जुड़ा हुआ जवाब देखें। (tl; dr: आप नहीं कर सकते हैं)।

— वर्धमान ताजा

162

विज़ुअल इवेंट नामक एक अच्छा बुकमार्कलेट है जो आपको एक तत्व से जुड़ी सभी घटनाओं को दिखा सकता है। इसमें विभिन्न प्रकार की घटनाओं (माउस, कीबोर्ड, आदि) के लिए रंग-कोडित हाइलाइट हैं। जब आप उन पर मंडराते हैं, तो यह ईवेंट हैंडलर के शरीर को दिखाता है कि यह कैसे जुड़ा हुआ था, और फ़ाइल / लाइन नंबर (वेबकीट और ओपेरा पर)। आप मैन्युअल रूप से ईवेंट को ट्रिगर भी कर सकते हैं।

यह प्रत्येक ईवेंट को नहीं ढूंढ सकता क्योंकि किसी हैंडलर को किसी तत्व से संलग्न करने के लिए कोई मानक तरीका नहीं है, लेकिन यह लोकप्रिय पुस्तकालयों जैसे jQuery, प्रोटोटाइप, MooTools, YUI, आदि के साथ काम करता है।

— मैथ्यू Crumley
स्रोत

8

ध्यान दें कि चूंकि यह सामग्री जावास्क्रिप्ट में चलती है, इसलिए यह जावास्क्रिप्ट पुस्तकालयों को क्वेरी करके अपना डेटा प्राप्त करती है। तो यह केवल एक समर्थित लाइब्रेरी (जिसमें jQuery शामिल है) के साथ जोड़े गए इवेंट दिखाएगा।

— मैथ्यू फ्लशेन

41

आप FireQuery का उपयोग कर सकते हैं । यह फायरबग के HTML टैब में DOM तत्वों से जुड़ी किसी भी घटना को दर्शाता है। यह तत्वों से जुड़े किसी भी डेटा को भी दिखाता है $.data।

— श्रीकांत शरत
स्रोत

1

उस प्लगइन में 1 वास्तव में बड़ा नकारात्मक पहलू है: जब आप डिबगिंग कर रहे हैं, और आप एक चर के मूल्य का निरीक्षण करना चाहते हैं जिसमें एक jquery संग्रह है जिसमें आप उस मूल्य का निरीक्षण करने में सक्षम नहीं होते हैं जब आपका कोड रोका जाता है। यह फायरबग के साथ कारण नहीं है। मेरे लिए इसे अनइंस्टॉल करने का कारण। अकेले

— Maarten Kieft

1

FireQuery संलग्न घटनाओं को दिखाने के लिए नहीं लगता है :(

— Matty J

26

यहाँ एक प्लगइन है जो किसी भी तत्व / घटना के लिए सभी ईवेंट हैंडलर को सूचीबद्ध कर सकता है:

$.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 );
               });
           }
        });
    });
};

इसे इस तरह उपयोग करें:

// 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: (मेरा ब्लॉग) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

— जेम्स
स्रोत

23

WebKit डेवलपर कंसोल (क्रोम, सफारी, आदि में पाया जाता है) आपको तत्वों के लिए संलग्न घटनाओं को देखने देता है।

इस स्टैक ओवरफ्लो प्रश्न में अधिक विस्तार

— क्रिस्टियन सांचेज़
स्रोत

2

और फ़ायरफ़ॉक्स के लिए, निर्देश MDN

— Fla

11

उपयोग $._data(htmlElement, "events")Jquery में 1.7+;

उदाहरण के लिए:

$._data(document, "events") या $._data($('.class_name').get(0), "events")

— तमसे पाप
स्रोत

8

सहकर्मी ने सुझाव दिया, कंसोल.लॉग> अलर्ट:

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
    console.log(value);
})

— Flevour
स्रोत

6

jQuery निम्नलिखित में घटनाओं को संग्रहीत करता है:

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

console.log($("a#somefoo").data("events"))उस तत्व से जुड़ी घटनाओं को सूचीबद्ध करना चाहिए।

— एलेक्स हेड
स्रोत

5

नवीनतम क्रोम (v29) में DevTools का उपयोग करते हुए मुझे डिबगिंग घटनाओं के लिए ये दो युक्तियां बहुत उपयोगी लगती हैं:

अंतिम चयनित DOM तत्व की jQuery की घटनाओं को सूचीबद्ध करना
- पृष्ठ पर एक तत्व का निरीक्षण करें
- कंसोल में निम्न टाइप करें:
  
  $ ._ डेटा ( $ 0 , "ईवेंट") // jQuery 1.7+ मानकर
- यह इसके साथ जुड़े सभी jQuery इवेंट ऑब्जेक्ट्स को सूचीबद्ध करेगा, इच्छुक इवेंट का विस्तार करेगा, "हैंडलर" संपत्ति के फ़ंक्शन पर राइट-क्लिक करें और "शो फ़ंक्शन परिभाषा" चुनें। यह निर्दिष्ट फ़ंक्शन वाले फ़ाइल को खोलेगा।
मॉनिटरएवेंट्स () कमांड का उपयोग

— mateuscb
स्रोत

4

लगता है कि FireBug क्रू एक EventBug एक्सटेंशन पर काम कर रहा है। यह FireBug - घटनाक्रम के लिए एक और पैनल जोड़ देगा।

"ईवेंट पैनल ईवेंट प्रकार द्वारा समूहीकृत पेज पर सभी ईवेंट हैंडलर को सूचीबद्ध करेगा। प्रत्येक ईवेंट प्रकार के लिए आप उन तत्वों को देखने के लिए खोल सकते हैं जो श्रोता फ़ंक्शन स्रोत के सारांश और सारांश के लिए बाध्य हैं।" इवेंटबग राइजिंग

हालाँकि वे अभी यह नहीं कह सकते कि यह कब रिलीज़ होगी।

— jayarjo
स्रोत

2

यह सुविधा जारी की गई और FireBug 2.0.1 में शामिल किया गया। अब जब आप एक पृष्ठ पर एक HTML तत्व का निरीक्षण करते हैं, तो एक नया "ईवेंट" पैनल होता है जहां आप संलग्न घटनाओं और उनके हैंडलर्स को देख सकते हैं।

— 17:lo पर derloopkat

4

मुझे क्रोम स्टोर में jQuery डीबगर भी मिला । आप एक डोम आइटम पर क्लिक कर सकते हैं और यह कॉलबैक फ़ंक्शन के साथ सभी घटनाओं को दिखाएगा। मैं एक ऐसे एप्लिकेशन पर डिबग कर रहा था, जहां घटनाओं को ठीक से हटाया नहीं जा रहा था और इससे मुझे मिनटों में ट्रैक करने में मदद मिली। जाहिर है यह क्रोम के लिए है, हालांकि फ़ायरफ़ॉक्स नहीं।

— लूटना
स्रोत

4

ev तत्वों के बगल में आइकन

फ़ायरफ़ॉक्स डेवलपर टूल के इंस्पेक्टर पैनल में एक तत्व से जुड़ी सभी घटनाओं को सूचीबद्ध किया गया है।

पहले Ctrl+ Shift+ के साथ एक तत्व का चयन करें C, जैसे स्टैक ओवरफ्लो के अपवोट तीर।

evतत्व के दाईं ओर आइकन पर क्लिक करें , और एक संवाद खुलता है:

पॉज साइन पर क्लिक करें ||इच्छित ईवेंट के लिए चिन्ह , और यह हैंडलर की लाइन पर डीबगर को खोलता है।

अब आप हमेशा की तरह डिबगर में एक ब्रेकपॉइंट रख सकते हैं, लाइन के बाएं मार्जिन पर क्लिक करके।

इसका उल्लेख यहां किया गया है: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

दुर्भाग्य से, मैं इसके लिए एक अच्छा तरीका नहीं देख सकता हूं कि यह बहुत ही सुंदर है, यह सिर्फ छोटी लाइन में खुलता है: फ़ायरफ़ॉक्स / फायरबग में जावास्क्रिप्ट और सीएसएस को कैसे सुशोभित किया जाए?

फ़ायरफ़ॉक्स 42 पर परीक्षण किया गया।

— सिरो सेंटिल्ली 郝海东冠状郝海东郝海东郝海东郝海东
स्रोत

दुर्भाग्य से विरासत में मिले श्रोताओं का पता लगाने के लिए यह अच्छी तरह से काम नहीं करता है।

— चुक्को

3

इस सूत्र के अनुसार , डोम तत्व पर श्रोताओं से जुड़ी हुई घटनाओं को देखने के लिए फायरबग में कोई तरीका नहीं है।

ऐसा लगता है कि आप जो कर सकते हैं वह सबसे अच्छा है या तो tj111 सुझाव देता है, या आप एचटीएमएल दर्शक में तत्व को राइट-क्लिक कर सकते हैं, और "लॉग इवेंट्स" पर क्लिक कर सकते हैं ताकि आप देख सकें कि कौन से इवेंट किसी विशेष डोम तत्व के लिए फायरिंग कर रहे हैं। मुझे लगता है कि कोई भी ऐसा करने के लिए देख सकता है कि कौन सी घटनाएं विशेष कार्यों से दूर हो सकते हैं।

— डैन ल्यू
स्रोत

2

2.0 संस्करण के साथ फायरबग ने एक ईवेंट पैनल पेश किया , जो एचटीएमएल पैनल के भीतर वर्तमान में चयनित तत्व के लिए सभी घटनाओं को सूचीबद्ध करता है ।

यह ईवेंट शो श्रोताओं को jQuery इवेंट बाइंडिंग में लिपटे हुए प्रदर्शित कर सकता है यदि विकल्प शो रैपर्ड श्रोताओं की जांच की जाती है, जिसे आप ईवेंट पैनल के विकल्प मेनू के माध्यम से पहुंचा सकते हैं ।

उस पैनल के साथ एक इवेंट हैंडलर डिबग करने के लिए वर्कफ़्लो इस प्रकार है:

उस इवेंट श्रोता के साथ तत्व का चयन करें जिसे आप डीबग करना चाहते हैं
इवेंट साइड पैनल के अंदर संबंधित घटना के तहत फ़ंक्शन को राइट-क्लिक करें और सेट ब्रेकपॉइंट चुनें
घटना को ट्रिगर

=> स्क्रिप्ट का निष्पादन इवेंट हैंडलर फ़ंक्शन की पहली पंक्ति में बंद हो जाएगा और आप इसे डीबग कर सकते हैं।

— सेबस्टियन जार्टनर
स्रोत

0

Firebug 2 अब DOM इवेंट डीबगिंग / निरीक्षण को शामिल करता है।

— MRalwasser
स्रोत