ফায়ারব্যাগ বা অনুরূপ সরঞ্জামগুলির সাথে কীভাবে জাভাস্ক্রিপ্ট / jQuery ইভেন্টের বাইন্ডিংগুলি ডিবাগ করবেন?

Question

আমার এমন একটি ওয়েব অ্যাপ্লিকেশন ডিবাগ করা দরকার যা কিছু জটিল এবং অগোছালো ডিওএম ম্যানিপুলেশন করতে jQuery ব্যবহার করে। এক পর্যায়ে কিছু ইভেন্ট যা নির্দিষ্ট উপাদানগুলির সাথে আবদ্ধ ছিল তা বরখাস্ত করা হয় না এবং কেবল কাজ করা বন্ধ করে দেয়।

যদি অ্যাপ্লিকেশন উত্সটি সম্পাদনা করার ক্ষমতা আমার ছিল, তবে আমি সমস্যাটি চিহ্নিত করার চেষ্টা করার জন্য আমি একগুচ্ছ ফায়ারব্যাগের console.log() বিবৃতি এবং মন্তব্য / কোডের কোডগুলিকে যুক্ত করব। তবে ধরে নেওয়া যাক আমি অ্যাপ্লিকেশন কোডটি সম্পাদনা করতে পারছি না এবং ফায়ারবগ বা অনুরূপ সরঞ্জাম ব্যবহার করে ফায়ারফক্সে পুরোপুরি কাজ করা দরকার।

ফায়ারব্যাগটি আমাকে ডিওএম নেভিগেট করতে এবং পরিচালনা করতে খুব ভাল। যদিও এখন পর্যন্ত আমি ফায়ারব্যাগের সাথে কীভাবে ইভেন্ট ডিবাগ করব তা অনুধাবন করতে পারিনি। বিশেষত, আমি কেবলমাত্র একটি নির্দিষ্ট সময়ে নির্দিষ্ট উপাদানগুলিতে আবদ্ধ ইভেন্ট হ্যান্ডলারের একটি তালিকা দেখতে চাই (পরিবর্তনগুলি সনাক্ত করতে ফায়ারব্যাগ জাভাস্ক্রিপ্ট ব্রেকপয়েন্টগুলি ব্যবহার করে)। তবে উভয়ই ফায়ারবাগের আবদ্ধ ইভেন্টগুলি দেখার ক্ষমতা রাখে না, বা এটি খুঁজে পাওয়ার জন্য আমি খুব বোকা। :-)

কোন সুপারিশ বা ধারণা? আদর্শভাবে, আমি কেবলমাত্র উপাদানগুলিতে আবদ্ধ ইভেন্টগুলি দেখতে এবং সম্পাদনা করতে চাই, একইভাবে আমি কীভাবে আজ ডমকে সম্পাদনা করতে পারি।

Answer 1

কীভাবে কোনও ডিওএম নোডে ইভেন্ট শ্রোতাদের সন্ধান করতে হয় তা দেখুন ।

সংক্ষেপে, ধরে নেওয়া যায় যে কোনও সময়ে ইভেন্ট হ্যান্ডলারটি আপনার উপাদানটির সাথে সংযুক্ত থাকে (যেমন): $('#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!') }"
  })
  

Comments

এফওয়াইআই: এটি jQuery এর সাথে সংযুক্ত ছিল না এমন ইভেন্টগুলি প্রদর্শন করবে না

— জুয়ান মেন্ডেস

সম্পূর্ণরূপে কনসোল.লগ () এর সাথে একমত হোন, তবে কোডে if (window.console)ছেড়ে যাওয়ার ক্ষেত্রে (সতর্কতা ()) এর চেয়ে করণীয় আরও সহজ এবং আই ব্রেক করে এমন কিছু দিয়ে এটি হেজ করা উচিত ।

— থিপার

@ থিপার ব্যক্তিগতভাবে আমি ফাইলের শুরুতে কনসোলের জন্য একটি চেক করতে পছন্দ করি এবং এটি উপস্থিত না থাকলে একটি ডামি অবজেক্ট তৈরি করুন।

— অ্যান্ড্রু

নীচে সমস্ত ইভেন্ট ডিবাগ করার জন্য অনুরূপ স্নিপেট রয়েছে (দয়া করে বিন্যাসের অভাবটি ক্ষমা করুন):$('#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) ; }); });

— কোরি ও।

@ BrainSlugs83: এই উত্তরের লিঙ্কিত উত্তরটি দেখুন। (tl; dr: আপনি পারবেন না)।

— ক্রিসেন্ট ফ্রেশ

Answer 2

ভিজ্যুয়াল ইভেন্ট নামে একটি দুর্দান্ত বুকমার্কলেট রয়েছে যা আপনাকে কোনও উপাদানের সাথে সংযুক্ত সমস্ত ইভেন্ট প্রদর্শন করতে পারে। এটিতে বিভিন্ন ধরণের ইভেন্টের জন্য রঙ-কোডেড হাইলাইট রয়েছে (মাউস, কীবোর্ড ইত্যাদি)। আপনি যখন তাদের উপরে ঘোরাফেরা করেন, এটি ইভেন্ট হ্যান্ডলারের শরীর, এটি কীভাবে সংযুক্ত ছিল এবং ফাইল / লাইন নম্বর (ওয়েবকিট এবং অপেরাতে) দেখায়। আপনি নিজেও ইভেন্টটি ট্রিগার করতে পারেন।

এটি প্রতিটি ইভেন্ট সন্ধান করতে পারে না কারণ কোন ইভেন্টের সাথে কোন ইভেন্টের হ্যান্ডলার সংযুক্ত রয়েছে তা অনুসন্ধান করার কোনও মানক উপায় নেই তবে এটি jQuery, প্রোটোটাইপ, MooTools, YUI, ইত্যাদি জনপ্রিয় লাইব্রেরিগুলির সাথে কাজ করে

Comments

নোট করুন যেহেতু এটি কন্টেন্ট জাভাস্ক্রিপ্টে চলে তাই এটি জাভাস্ক্রিপ্ট লাইব্রেরি জিজ্ঞাসা করে এর ডেটা পায়। সুতরাং এটি কেবলমাত্র সমর্থিত লাইব্রেরির সাথে জুড়ে যাওয়া ইভেন্টগুলি দেখায় (যার মধ্যে jQuery অন্তর্ভুক্ত)।

— ম্যাথু ফ্ল্যাশেন

Answer 3

আপনি ফায়ারকোয়ারি ব্যবহার করতে পারেন । এটি ফায়ারব্যাগের এইচটিএমএল ট্যাবে ডোম উপাদানগুলির সাথে সংযুক্ত যে কোনও ইভেন্ট দেখায়। এটি এর মাধ্যমে উপাদানগুলির সাথে সংযুক্ত যে কোনও ডেটাও দেখায় $.data।

Comments

এই প্লাগইনটিতে 1 টি সত্যিই বড় খারাপ রয়েছে: আপনি যখন ডিবাগ করছেন এবং যখন আপনি কোনও ভেরিয়েবলের মান পরীক্ষা করতে চান যাতে একটি জেকারি সংগ্রহ থাকে আপনি যখন আপনার কোডটি থামিয়ে দেন তখন মানটি পরীক্ষা করতে সক্ষম হন না। এটি ফায়ারব্যাগের সাথে কারণ নয়। আমার এটি আনইনস্টল করার কারণ। একা

— মার্টেন কিফট

ফায়ারকিউয়ারি আর সংযুক্ত ইভেন্টগুলি দেখায় না বলে মনে হয় :(

— ম্যাটি জে

Answer 4

এখানে একটি প্লাগইন রয়েছে যা কোনও প্রদত্ত উপাদান / ইভেন্টের জন্য সমস্ত ইভেন্ট হ্যান্ডলার তালিকাবদ্ধ করতে পারে:

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

এসসিআর: (আমার ব্লগ) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Answer 5

ওয়েবকিট বিকাশকারী কনসোল (ক্রোম, সাফারি ইত্যাদি পাওয়া যায়) আপনাকে উপাদানগুলির জন্য সংযুক্ত ইভেন্টগুলি দেখতে দেয়।

এই স্ট্যাক ওভারফ্লো প্রশ্নে আরও বিশদ

Comments

এবং ফায়ারফক্সের জন্য, নির্দেশগুলি এমডিএন

— ফ্লায়

Answer 6

$._data(htmlElement, "events")Jquery 1.7+ ব্যবহার করুন ;

উদা:

$._data(document, "events") অথবা $._data($('.class_name').get(0), "events")

Answer 7

সহকর্মীর পরামর্শ অনুসারে, কনসোল.লগ> সতর্কতা:

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

Answer 8

jQuery নিম্নলিখিতগুলিতে ইভেন্টগুলি সঞ্চয় করে:

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

একটি console.log($("a#somefoo").data("events"))করার ফলে সেই উপাদানটির সাথে সংযুক্ত ইভেন্টগুলির তালিকা হওয়া উচিত।

Answer 9

সর্বশেষতম ক্রোমে ডিভটুলগুলি ব্যবহার করা (v29) আমি এই দুটি টিপস ইভেন্টগুলি ডিবাগ করার জন্য খুব সহায়ক বলে মনে করি:

1. সর্বশেষ নির্বাচিত DOM উপাদানটির jQuery ইভেন্টগুলি তালিকাভুক্ত করা হচ্ছে

   • পৃষ্ঠায় একটি উপাদান পরিদর্শন করুন
   • কনসোলে নিম্নলিখিত টাইপ করুন:

     _ ._ ডেটা ( $ 0 , "ইভেন্ট") // অনুমান করে jQuery 1.7+

   • এটি এর সাথে সম্পর্কিত সমস্ত jQuery ইভেন্ট অবজেক্টের তালিকা তৈরি করবে, আগ্রহী ইভেন্টটি প্রসারিত করবে, "হ্যান্ডলার" সম্পত্তিটির ফাংশনে ডান ক্লিক করুন এবং "ফাংশন সংজ্ঞা দেখান" নির্বাচন করবেন। এটি নির্দিষ্ট ফাংশনযুক্ত ফাইলটি খুলবে।

2. মনিটরইভেন্টস () কমান্ডটি ব্যবহার করা হচ্ছে

Answer 10

দেখে মনে হচ্ছে ফায়ারব্যাগ ক্রু ইভেন্টব্যাগ এক্সটেনশনে কাজ করছে। এটি ফায়ারব্যাগ - ইভেন্টগুলিতে আরও একটি প্যানেল যুক্ত করবে।

"ইভেন্ট প্যানেল ইভেন্টের ধরণ অনুসারে গোষ্ঠীভুক্ত পৃষ্ঠায় ইভেন্টের সমস্ত হ্যান্ডলারের তালিকা তৈরি করবে each প্রতিটি ইভেন্টের ধরণের জন্য আপনি শ্রোতাদের যে উপাদানগুলির জন্য আবদ্ধ এবং ফাংশন উত্সের সংক্ষিপ্তসারগুলি তা দেখার জন্য খুলতে পারেন" " ইভেন্টবগ রাইজিং

যদিও এটি প্রকাশ করা হবে তা এখনই তারা বলতে পারেন না।

Comments

এই বৈশিষ্ট্যটি প্রকাশিত হয়েছিল এবং ফায়ারব্যাগ ২.০.১ এ অন্তর্ভুক্ত ছিল। এখন আপনি যখন কোনও পৃষ্ঠায় কোনও এইচটিএমএল উপাদানটি পরীক্ষা করেন, সেখানে একটি নতুন "ইভেন্টস" প্যানেল থাকে যেখানে আপনি সংযুক্ত ইভেন্ট এবং তাদের হ্যান্ডলারগুলি দেখতে পাবেন।

— derloopkat

Answer 11

আমি ক্রোম স্টোরটিতে jQuery ডিবাগারও পেয়েছি । আপনি একটি ডোম আইটেমটিতে ক্লিক করতে পারেন এবং এটি কলব্যাক ফাংশন সহ এটিতে আবদ্ধ সমস্ত ইভেন্ট প্রদর্শন করবে। আমি একটি অ্যাপ্লিকেশন ডিবাগ করছি যেখানে ইভেন্টগুলি সঠিকভাবে সরানো হয়নি এবং এটি আমাকে কয়েক মিনিটের মধ্যে এটি ট্র্যাক করতে সহায়তা করেছিল। স্পষ্টতই এটি ক্রোমের জন্য, যদিও ফায়ারফক্স নয়।

Answer 12

ev উপাদানগুলির পাশে আইকন

ফায়ারফক্স বিকাশকারী সরঞ্জামের মধ্যে পরিদর্শক প্যানেল সমস্ত ইভেন্টকে একটি উপাদানকে আবদ্ধ করে lists

প্রথম একটি উপাদান নির্বাচন Ctrl+ + Shift+ + C, যেমন স্ট্যাক ওভারফ্লো ভোট দিন তীর।

evউপাদানটির ডানদিকে আইকনে ক্লিক করুন , এবং একটি কথোপকথন খোলে:

আপনি ||যে ইভেন্টটি চান তার জন্য বিরতি চিহ্নের চিহ্নটিতে ক্লিক করুন এবং এটি হ্যান্ডলারের লাইনে ডিবাগারটি খুলবে।

লাইনের বাম মার্জিনে ক্লিক করে আপনি এখন যথারীতি ডিবাগারে একটি ব্রেকপয়েন্ট রাখতে পারেন।

এটি এখানে উল্লেখ করা হয়েছে: https://developer.mozilla.org/en-US/docs/Tools/age_Inspector/How_to/Examine_event_listeners

দুর্ভাগ্যক্রমে, আমি প্রশংসনের সাথে সুন্দরভাবে খেলার জন্য এটির কোনও উপায় খুঁজে পাইনি, এটি কেবল সংশোধিত লাইনেই খোলার মতো মনে হচ্ছে: ফায়ারফক্স / ফায়ারব্যাগে জাভাস্ক্রিপ্ট এবং সিএসএস কীভাবে শোভিত করবেন ?

ফায়ারফক্স 42-এ পরীক্ষিত।

Comments

দুর্ভাগ্যক্রমে উত্তরাধিকারী শ্রোতাদের সনাক্ত করার জন্য এটি ভাল কাজ করে না।

— চুক্কো

Answer 13

এই থ্রেড অনুসারে , কোনও ডিওএম উপাদানটিতে শ্রোতার সাথে কী ঘটনা সংযুক্ত রয়েছে তা দেখার জন্য ফায়ারবাগের কোনও উপায় নেই।

দেখে মনে হচ্ছে আপনি যেটা সবচেয়ে ভাল করতে পারেন তা হল tj111 এর পরামর্শ অনুসারে, অথবা আপনি এইচটিএমএল ভিউয়ারের উপাদানটিতে ডান-ক্লিক করতে পারেন এবং "লগ ইভেন্টগুলি" ক্লিক করতে পারেন যাতে আপনি দেখতে পারেন কোন নির্দিষ্ট ডোম উপাদানটির জন্য কোন ইভেন্টগুলি গুলি চালাচ্ছে। আমি মনে করি যে কোনও ঘটনাগুলি বিশেষ ক্রিয়াকলাপ বন্ধ করে দিতে পারে তা দেখতে এটি করতে পারে।

Answer 14

সংস্করণ ২.০ সহ ফায়ারবাগ একটি ইভেন্ট প্যানেল প্রবর্তন করেছে , যা এইচটিএমএল প্যানেলের মধ্যে বর্তমানে নির্বাচিত উপাদানটির জন্য সমস্ত ইভেন্টের তালিকা করে ।

এটি র্যাপড শ্রোতাদের দেখান বিকল্পটি চেক করা আছে এমন ক্ষেত্রে jQuery ইভেন্টের বাইন্ডিংগুলিতে আবৃত ইভেন্ট শ্রোতাদেরও প্রদর্শন করতে পারে, যা ইভেন্টস প্যানেলের বিকল্প মেনু দিয়ে আপনি পৌঁছাতে পারবেন ।

সেই প্যানেলের সাথে ইভেন্ট হ্যান্ডলারটি ডিবাগ করার ওয়ার্কফ্লোটি নীচে রয়েছে:

1. আপনি ইভেন্টটি শ্রোতার সাথে উপাদানটি নির্বাচন করুন যা আপনি ডিবাগ করতে চান
2. ইভেন্টস সাইড প্যানেলের ভিতরে সম্পর্কিত ইভেন্টের অধীনে ফাংশনটিতে ডান ক্লিক করুন এবং ব্রেকপয়েন্টটি সেট করুন চয়ন করুন
3. ইভেন্টটি ট্রিগার করুন

=> স্ক্রিপ্ট সম্পাদন ইভেন্ট হ্যান্ডলার ফাংশনের প্রথম লাইনে থামবে এবং আপনি এটিকে ডিবাগ করতে পারেন।

Answer 15

ফায়ারব্যাগ 2 এখন ডিওএম ইভেন্টগুলি ডিবাগিং / পরিদর্শনকে অন্তর্ভুক্ত করে।