Event Listeners event listener আছে এমন প্রতিটি উপাদানের রূপরেখা দেয়, রঙিন ধরনের — ক্লিক, হোভার, স্ক্রোল, টাচ, কীবোর্ড এবং ফর্ম — দেখায় যে প্রতিটি হ্যান্ডলার কোথা থেকে এসেছে, এবং DOM পরিবর্তনের সাথে সাথে উপাদানগুলিকে ফ্ল্যাশ করে।
কেন কিছু প্রতিক্রিয়া দেখায় — বা করে না — সাধারণত এমন একটি প্রশ্ন দিয়ে শুরু হয় যা পৃষ্ঠাটি উত্তর দেয় না: এই উপাদানটিতে কি আদৌ কোনো ক্লিক হ্যান্ডলার আছে? কোন উপাদান আসলে হোভার আচরণের মালিক? স্ক্রল শুনতে এবং পাতা তোতলা করা কি? ব্রাউজার DevTools একবারে একটি উপাদানের listeners তালিকা করতে পারে, যদি আপনি ইতিমধ্যে জানেন যে কোন উপাদানটি নির্বাচন করতে হবে।
এই টুলটি একবারে পুরো পৃষ্ঠার প্রশ্নের উত্তর দেয়। listener সাথে প্রতিটি উপাদান তার ধরণের রঙে একটি রূপরেখা পায় — ক্লিক করুন, হোভার করুন, স্ক্রোল করুন, টাচ এবং টেনে আনুন, কীবোর্ড, বা ফর্ম এবং ফোকাস — এবং একটি হোভার করা সঠিক ইভেন্টগুলি এবং প্রতিটি কোথা থেকে এসেছে তা দেখায়: একটি ইনলাইন অ্যাট্রিবিউট, একটি অন-প্রপার্টি, একটি React বা Vue হ্যান্ডলার, jQuery, বা addEventListener । ক্যাটাগরি টাইলস প্রতিটি ধরণের সুইচ চালু এবং বন্ধ করে এবং নীচের তালিকাটি প্রতিটি উপাদানের নাম দেয়, তাই একটি ক্লিক আপনাকে এতে স্ক্রোল করে।
ফ্রেমওয়ার্ক সঠিকভাবে পরিচালনা করা হয়. React তার listeners রুটের সাথে সংযুক্ত করে এবং অভ্যন্তরীণভাবে ইভেন্টগুলি প্রেরণ করে, যা পুরো অ্যাপটিকে ক্লিকযোগ্য দেখায়; টুলটি সেই রুট রেজিস্ট্রেশনগুলিকে একপাশে সেট করে এবং যে উপাদানগুলি তাদের ঘোষণা করে সেগুলিতে React হ্যান্ডলারগুলিকে দেখায়। দ্রুত স্ক্যানের জন্য কোন রিলোডের প্রয়োজন নেই এবং ইনলাইন হ্যান্ডলার, React, Vue এবং jQuery কভার করে। টুল খোলার আগে প্লেইন addEventListener সাথে যোগ করা Listeners শুধুমাত্র একটি পৃষ্ঠা লোডের শুরু থেকে দেখা যায়, তাই Reload & record রেকর্ডিং চালু করার সাথে সাথে পৃষ্ঠাটি পুনরায় লোড করে — টুলটি তারপরে প্রতিটি listener অন্তর্ভুক্ত করে, window এবং document পৃষ্ঠা-স্তরের বিষয়গুলি সহ পুনরায় খোলে।
দ্বিতীয় ট্যাব DOM নিজেই দেখে। প্রতিটি যোগ করা বা সরানো নোড, বৈশিষ্ট্য পরিবর্তন এবং টেক্সট পরিবর্তন পৃষ্ঠায় ফ্ল্যাশ করে, কাউন্টারগুলি প্রতি সেকেন্ডে মিউটেশন দেখায় এবং একটি তালিকা অন্তর্ভুক্ত বৈশিষ্ট্যগুলির সাথে সবচেয়ে বেশি পরিবর্তিত উপাদানগুলিকে স্থান দেয়৷ একটি স্থির স্ট্রীম যখন কেউ পৃষ্ঠাটি স্পর্শ করে না তখন সাধারণত একটি টাইমার, একটি জাভাস্ক্রিপ্ট-চালিত অ্যানিমেশন বা ফ্রেমওয়ার্ক এটির চেয়ে বেশি রি-রেন্ডারিং বোঝায় — ঠিক যে জিনিসগুলি ব্যাটারি নিষ্কাশন করে এবং পৃষ্ঠাগুলিকে তোতলা করে তোলে।
ক্লিক, হোভার, স্ক্রোল, টাচ, কীবোর্ড এবং ফর্ম listeners সহ উপাদানগুলিকে তাদের নিজস্ব রঙে রূপরেখা দেওয়া হয়েছে, প্রতিটি ধরণের দেখানো বা লুকানোর জন্য টাইলস সহ।
ইনলাইন অ্যাট্রিবিউট, অন-প্রপার্টি, React এবং Vue হ্যান্ডলার, jQuery ইভেন্ট এবং addEventListener কল, প্রতিটি উপাদানে লেবেল করা।
React রুট-স্তরের listeners আলাদা করে রাখা হয়েছে, এবং এর হ্যান্ডলারগুলি সম্পূর্ণ অ্যাপের পরিবর্তে তাদের ঘোষণাকারী উপাদানগুলিতে দেখানো হয়েছে।
শুধুমাত্র একটি লোডের জন্য window এবং document listeners সহ একটি পৃষ্ঠা লোডের শুরু থেকে Reload & record প্রতিটি addEventListener কল ক্যাচ করে৷
একটি মিউটেশন-প্রতি-সেকেন্ড কাউন্টার সহ নোডগুলি যোগ করা এবং সরানো, পৃষ্ঠায় বৈশিষ্ট্য পরিবর্তন এবং পাঠ্য পরিবর্তনগুলি ফ্ল্যাশ করে।
উপাদানগুলির একটি র্যাঙ্ক করা তালিকা যা সবচেয়ে বেশি পরিবর্তন করে, জড়িত গুণাবলী সহ, সরাসরি পলাতক পুনরায় রেন্ডারে নির্দেশ করে৷
এক নজরে দেখুন একটি বোতামে আসলে একজন listener আছে কিনা, বা হ্যান্ডলার পরিবর্তে একটি র্যাপার এলিমেন্টে বসে আছে কিনা।
window এবং document listeners সহ স্ক্রোল, চাকা বা টাচমুভ শোনার প্রতিটি উপাদান খুঁজুন।
কোন নিয়ন্ত্রণগুলি কীবোর্ড ইভেন্টগুলিতে প্রতিক্রিয়া জানায় এবং কোনটি শুধুমাত্র মাউসে প্রতিক্রিয়া জানায় তা পরীক্ষা করুন৷
পৃষ্ঠাটি নিষ্ক্রিয় থাকাকালীন মিউটেশন কাউন্টার দেখুন; যে উপাদানগুলি একটি টাইমার বা একটি ফ্রেমওয়ার্কের দিকে বিন্দু পরিবর্তন করে অতিরিক্ত কাজ করে।
কোন অংশগুলি ইন্টারেক্টিভ এবং কোন ফ্রেমওয়ার্ক সেগুলিকে সংযুক্ত করেছে তা দেখতে একটি অপরিচিত সাইটের চারপাশে ঘোরাঘুরি করুন৷
DevSuite Pro ডকে Event Listeners আইকনে ক্লিক করুন। একটি দ্রুত স্ক্যান অবিলম্বে চলে এবং এটি খুঁজে পাওয়া প্রতিটি উপাদানের রূপরেখা দেয়।
এর ইভেন্ট এবং তাদের উত্স দেখতে যে কোনো রূপরেখা উপাদান হোভার করুন। শুধুমাত্র ক্লিক, হোভার বা স্ক্রোল listeners দেখানোর জন্য বিভাগ টাইলস ব্যবহার করুন।
রেকর্ডিং চালু থাকার সাথে সাথে পৃষ্ঠাটি পুনরায় লোড করতে Reload & record । টুলটি নিজে থেকেই আবার খোলে এবং এখন প্রতিটি addEventListener কল অন্তর্ভুক্ত করে।
সেই উপাদানটিতে পৃষ্ঠাটি স্ক্রোল করতে তালিকার একটি সারিতে ক্লিক করুন এবং এটি ফ্ল্যাশ করুন। Copy report আপনাকে পাঠ্য হিসাবে সম্পূর্ণ তালিকা দেয়।
DOM mutations ট্যাব খুলুন এবং পৃষ্ঠাটি ব্যবহার করুন। পরিবর্তনশীল উপাদানগুলি ফ্ল্যাশ করে, এবং ব্যস্ততমগুলি তালিকার শীর্ষে উঠে যায়।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৭৪+ ডেভলপার টুল আনলক করুন।
