আমি কীভাবে ক্রোম দেবটুলগুলিতে কোনও উপাদানগুলিতে নিক্ষেপিত ইভেন্টগুলি দেখতে পারি?

Question

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

আমি কীভাবে Chrome ওয়েব বিকাশকারী ব্যবহার করে তা করব?

Comments

এই বুকমার্কলেটে সহায়ক হতে পারে: sprymedia.co.uk/article/Visual+Event+2

— scytale

এখানে উত্তরটি মূল্যবান, তবে উপরের বুকমার্কটি হ'ল আসলে আমার সমস্যাটির সমাধান। sprymedia.co.uk/article/ ভিজুয়াল + ইভেন্ট +2

— জাজি

Answer 1

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

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

Comments

— ব্রেকশনপয়েন্টটি

যদি সমস্ত ইভেন্টগুলি minified jquery এ নির্দেশ করে তবে আমি সেদিকে খেয়াল রাখি না, কীভাবে আমি সেই ফাংশনটিতে পৌঁছতে পারি যা সেই jquery ব্যবহার করে।

— মুহাম্মদ উমার

এটি কি আমার দ্বারা নির্মিত কাস্টম ইভেন্টগুলি দেখাতে পারে? যখন আমি পড়ি যে এটি জীবন বদলেছিল যা আমি প্রথমে চিন্তা করি thought আমি কি কিছু মিস করছি?

— তেব

@ মুহাম্মাদউমার আপনি jQuery ব্ল্যাকবক্স করতে পারেন যাতে Chrome এটি এড়িয়ে যায় এবং সরাসরি আপনার উত্স কোডে চলে যায়। বিকাশকারী.চ্রোম

— দেবতুলস / ডকস / ব্ল্যাকবক্সিং

@ মুহাম্মাদউমর আপনি যদি কেবল জিকুয়েরি ব্যবহার বন্ধ করেন?

— জন বালভিন আরিয়াস

Answer 2

আপনি মনিটরএভেন্টস ফাংশন ব্যবহার করতে পারেন ।

শুধু (আপনার উপাদান পরিদর্শন right mouse click→ Inspectপ্রোফাইল উপাদান বা যেতে ElementsChrome বিকাশকারীর সরঞ্জামগুলিতে ট্যাব এবং চেয়েছিলেন উপাদান নির্বাচন করুন) তারপর যেতে Consoleট্যাব এবং লেখ:

monitorEvents($0)

এখন আপনি যখন এই উপাদানটির উপর দিয়ে মাউস সরিয়ে নেবেন, ফোকাস করুন বা ক্লিক করুন, তখন বহিস্কার ইভেন্টের নামটি এর ডেটা সহ প্রদর্শিত হবে।

এই ডেটা পাওয়া বন্ধ করতে কেবল এটি কনসোলে লিখুন:

unmonitorEvents($0)

$0ক্রোম বিকাশকারী সরঞ্জাম দ্বারা নির্বাচিত কেবল সর্বশেষ ডিওএম উপাদান। আপনি সেখানে অন্য যে কোনও ডিওএম বস্তুটি পাস করতে পারেন (উদাহরণস্বরূপ getElementByIdবা এর ফলাফল querySelector)।

আপনি কিছু পূর্বনির্ধারিত সেটকে মনিটরিড ইভেন্টগুলিকে সংকীর্ণ করতে দ্বিতীয় প্যারামিটার হিসাবে ইভেন্ট "টাইপ" নির্দিষ্ট করতে পারেন। উদাহরণ স্বরূপ:

monitorEvents(document.body, 'mouse')

এই উপলব্ধ ধরণের তালিকা এখানে ।

আমি একটি ছোট gif তৈরি করেছি যা এই বৈশিষ্ট্যটি কীভাবে কাজ করে তা চিত্রিত করে:

Comments

একমত। নির্দিষ্ট উপাদানগুলিতে ইভেন্টগুলি নিরীক্ষণ এবং ট্র্যাক করার জন্য এটিই Defacto উপায় ।

— ডাম্যাকারম্যান

আহ্ হ্যাঁ আমি দেখছি। এটি ছিল "অপরিজ্ঞাত" যা আমাকে ফেলে দিচ্ছিল তবে আমি এখন আপনার সহায়ক অ্যানিমেটেড জিআইএফ-তে দেখতে পাচ্ছি। ধন্যবাদ।

— এমএসসি

আপনি জিআইএফ তৈরি করতে কোন সরঞ্জামটি ব্যবহার করেছেন

— জেরিগৈল

@ মারিউসপওয়েলস্কি এখান থেকে কীভাবে এগিয়ে যাবেন? আমি এটি করেছি এবং ক্লিক ইভেন্টটি পেয়েছি, যা আমি আগ্রহী এমন ইভেন্টটি But কিন্তু আমি যখন উপাদানটিতে ক্লিক করি তখন কী ঘটে তা আমি কীভাবে খুঁজে পাব? কোন ধরণের কোড কার্যকর করা হয়? আমার কোন সম্পত্তিটির সন্ধান করা MouseEventউচিত?

— উত্কু

তবে হ্যান্ডলারের সন্ধান কোথায় পাবেন হ্যান্ডলার ক্লিক করুন।

— শেখ আবদুল ওয়াহিদ

Answer 3

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

Answer 4

JQuery এর জন্য (কমপক্ষে সংস্করণ 1.11.2) নিম্নলিখিত পদ্ধতিটি আমার পক্ষে কাজ করেছিল।

1. উপাদানটিতে ডান ক্লিক করুন এবং 'Chrome বিকাশকারী সরঞ্জাম' খুলুন
2. $._data(($0), 'events');'কনসোল' টাইপ করুন
3. সংযুক্ত বস্তুগুলি প্রসারিত করুন এবং মানটিতে ডাবল ক্লিক করুন handler:।
4. এটি সংযুক্ত ফাংশনের উত্স কোডটি দেখায়, 'অনুসন্ধান' ট্যাবটি ব্যবহার করে এর অংশটি অনুসন্ধান করুন।

এবং চাকাটির পুনরায় উদ্ভাবন বন্ধ করার এবং ভ্যানিলা জেএস ইভেন্টগুলি ব্যবহার শুরু করার সময় ... :)

Answer 5

এটি কোনও স্ক্রিপ্ট প্লাগইন থাকলে আপনার স্ক্রিপ্টটি তৈরি করতে পারে এমন কাস্টম ইভেন্টগুলি প্রদর্শন করবে না। উদাহরণ স্বরূপ :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

ক্রোম বিকাশকারী সরঞ্জামগুলিতে স্ক্রিপ্টগুলির অধীনে ইভেন্ট প্যানেল আপনাকে "কিছু না কিছু: কাস্টম-ইভেন্ট-ওয়ান" প্রদর্শন করবে না

Comments

তাহলে কীভাবে কেউ এই ঘটনাগুলি খুঁজে পাবে?

— ক্যালিডন