ক্রোম ব্যবহার করে, কী কী ইভেন্টগুলি কোনও উপাদানের সাথে আবদ্ধ তা কীভাবে খুঁজে পাবেন

Question

ধরা যাক আমি আমার পৃষ্ঠায় একটি লিঙ্ক রেখেছি:

<a href="#" id="foo">Click Here</a>

আমি অন্য কিছু জানি না, তবে আমি যখন লিঙ্কটিতে ক্লিক করি তখন একটি alert("bar")প্রদর্শিত হয়। সুতরাং আমি জানি যে কোথাও কোথাও কোথাও কোনও কোড বেঁধে যাচ্ছে #foo।

alert("bar")ক্লিক ইভেন্টের সাথে বাঁধাই করা কোডটি আমি কীভাবে খুঁজে পাব ? আমি ক্রোম সহ একটি সমাধান খুঁজছি।

PS: উদাহরণটি কল্পনাপ্রসূত, সুতরাং আমি এর মতো সমাধান খুঁজছি না: "এক্সএক্সএক্সএক্সএক্সএক্সএক্স ব্যবহার করুন এবং" সতর্কতা (\ "বার for") "এর জন্য পুরো প্রকল্পটি অনুসন্ধান করুন I আমি একটি সত্য ডিবাগিং / ট্রেসিং সমাধান চাই।

Answer 1

ব্যবহার ক্রোম 15.0.865.0 দেব । এলিমেন্টস প্যানেলে একটি "ইভেন্ট শ্রোতা" বিভাগ রয়েছে:

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

Comments

কাছাকাছি পৌঁছনো, তবে সেখানে বেশিরভাগ ফলাফলগুলি ... jquery.min.js :( এর 16 লাইনের দিকে ইঙ্গিত করছে :( কেন বুঝতে হবে, তার ব্যাখ্যা দেওয়ার দরকার নেই, তবে কীভাবে বাঁধাই () পদ্ধতিটি বলা হয় আমরা কীভাবে খুঁজে পাব? jQuery?

— FMaz008

এই সরঞ্জামগুলি সমস্ত ক্রোম 12.0.742.100 এও উপলব্ধ। :) ধন্যবাদ!

— FMaz008

@ ফ্লফি: আপনার দরকার নেই। জেএস { }দেখার সময় কেবল বাম নীচের কোণায় প্রতীকটি ক্লিক করুন । ম্যাজিক।

— হ্যানস স্নাইডারমায়ার

JQuery এর জটিল ইভেন্ট প্রেরণ কোডের মাধ্যমে পদক্ষেপ নেওয়া একটি বড় ব্যথা। নীচে jQuery নিরীক্ষণ উত্তর ( stackoverflow.com/a/30487583/24267 ) অনেক ভাল।

— mhenry1384

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

— ক্রিস হেইন

Answer 2

সংযুক্ত ইভেন্টগুলি অন্যভাবে খুঁজে পেতে আপনি ক্রোমের পরিদর্শকও ব্যবহার করতে পারেন:

1. পরিদর্শন করতে উপাদানকে ডান ক্লিক করুন বা এটি 'উপাদানসমূহ' ফলকে সন্ধান করুন।
2. তারপরে 'ইভেন্ট শ্রোতাদের' ট্যাব / ফলকে ইভেন্টটি প্রসারিত করুন (যেমন 'ক্লিক করুন')
3. আপনি চান সেটি খুঁজতে বিভিন্ন সাব-নোডগুলি প্রসারিত করুন এবং তারপরে 'হ্যান্ডলার' সাব-নোডটি কোথায় তা সন্ধান করুন।
4. 'ফাংশন' শব্দটি ডান ক্লিক করুন এবং তারপরে 'ফাংশন সংজ্ঞা দেখান' ক্লিক করুন

এটি আপনাকে যেখানে হ্যান্ডলারটি সংজ্ঞায়িত করা হয়েছিল সেখানে নীচের চিত্রটিতে প্রদর্শিত হিসাবে দেখানো হবে এবং পল আইরিশ এখানে ব্যাখ্যা করেছেন: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Comments

দুই বছরের পুরানো, এবং এখনও এই প্রশ্নের সেরা উত্তর।

— স্টুয়ার্ট

Answer 3

এই পদক্ষেপগুলি অনুসরণ করে ইনস্টল করার পরে, jQuery অডিট এক্সটেনশনের ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ) চেষ্টা করে দেখুন:

1. উপাদানটি পরীক্ষা করুন
2. নতুন ' jQuery নিরীক্ষণ ' ট্যাবে ইভেন্টগুলির সম্পত্তিটি প্রসারিত করুন
3. আপনার প্রয়োজনীয় ইভেন্টের জন্য চয়ন করুন
4. হ্যান্ডলার সম্পত্তি থেকে, ডান ফাংশন উপর ক্লিক করুন এবং নির্বাচন ' ফাংশন দেখান সংজ্ঞা '
5. আপনি এখন ইভেন্টের বাইন্ডিং কোডটি দেখতে পাবেন
6. কোডটি আরও পঠনযোগ্য দেখার জন্য ' সুন্দর মুদ্রণ ' বোতামে ক্লিক করুন

Comments

এটি একটি দুর্দান্ত এক্সটেনশন এবং জাভাস্ক্রিপ্টের মাধ্যমে প্রচুর সময় সাশ্রয় করে।

— নিল মনরো

আমি প্রায়শই দেখতে পাই যে "ইভেন্ট শ্রোতারা" "কোনও ইভেন্ট শ্রোতার কোনও তালিকা নেই" এবং "ইভেন্ট শ্রোতার ব্রেকপয়েন্ট"> মাউস> ক্লিক নির্বাচন করার ফলে ব্রেকপয়েন্ট তৈরি হয় না। এই প্লাগইনটি খুব ভাল কাজ করে।

— স্টুয়ার্টন

@ জাভিয়ার> এটি একটি দুর্দান্ত প্রতিক্রিয়া। এটি কোনও জাভাস্ক্রিপ্ট (নন jQuery) মেকানিসমে কাজ করে?

— মাহেফা

Answer 4

(2020 সালের হিসাবে সর্বশেষ) সংস্করণ Chrome সংস্করণ 83.0.4103.61 এর জন্য :

1. আপনি যে উপাদানটি পরিদর্শন করতে চান তা নির্বাচন করুন

2. ইভেন্ট শ্রোতাদের ট্যাবটি চয়ন করুন

3. Jquery ফাংশনের পরিবর্তে আসল জাভাস্ক্রিপ্ট ফাইলটি দেখানোর জন্য ফ্রেমওয়ার্ক শ্রোতাদের পরীক্ষা করে দেখুন sure

Answer 5

সম্পাদনা করুন : আমার নিজের উত্তরের পরিবর্তে, এটি একটি দুর্দান্ত: ফায়ারব্যাগের সাথে জাভাস্ক্রিপ্ট / jQuery ইভেন্টের বাইন্ডিংগুলি কীভাবে ডিবাগ করা যায় (বা অনুরূপ সরঞ্জাম)

গুগল ক্রোম বিকাশকারী সরঞ্জামগুলির স্ক্রিপ্ট বিভাগে অন্তর্নির্মিত একটি অনুসন্ধান ফাংশন রয়েছে

আপনি যদি এই সরঞ্জামটির সাথে অপরিচিত হন: (কেবলমাত্র ক্ষেত্রে)

• কোনও পৃষ্ঠায় যে কোনও জায়গায় ডান ক্লিক করুন (ক্রোমে)
• 'উপাদান পরিদর্শন করুন' ক্লিক করুন
• 'স্ক্রিপ্টস' ট্যাবে ক্লিক করুন
• উপরের ডানদিকে বার অনুসন্ধান করুন

# আইডি-র জন্য দ্রুত অনুসন্ধান করা আপনাকে শেষ পর্যন্ত বাধ্যবাধকতা কার্যক্রমে নিয়ে যাওয়া উচিত।

উদাহরণস্বরূপ: অনুসন্ধান করা #fooআপনাকে নিতে হবে

$('#foo').click(function(){ alert('bar'); })

Comments

ভাল শুরু, তবে যদি আমার #foo এর 1500 টি উল্লেখ থাকে তবে তাদের বেশিরভাগই যে কোনও কিছুরই বাধ্যতামূলক নয়, বা আমার যেখানে বর্তমান ক্ষেত্রে সক্রিয় নয় এমন বাহ্যিক স্ক্রিপ্টগুলিতে একাধিক #foo আইডি রয়েছে?

— FMaz008

দুর্দান্ত প্রশ্ন। আমার অভিজ্ঞতায়, সেখানেই মানুষের ডিবাগিং প্রক্রিয়াটি সাধারণত শুরু হয় :)

— মাইকেল জ্যাস্পার

হেই, আপনি ঠিক বলেছেন, তবে আমার প্রশ্নটি এই ছিল যে একজন মানুষ হিসাবে আমাকে কী করতে হবে: p

— FMaz008

Answer 6

2018 আপডেট - ভবিষ্যতের পাঠকদের জন্য সহায়ক হতে পারে:

আমি নিশ্চিত নই যে এটি কখন ক্রোমে মূলত চালু হয়েছিল। তবে ক্রোমে এখন এটি করা যেতে পারে এমন আরও একটি (সহজ) উপায় কনসোল কমান্ডের মাধ্যমে।

উদাহরণস্বরূপ: ( ক্রোম কনসোল প্রকারে )

getEventListeners($0)

যেখানে OM 0 হল ডিওমে নির্বাচিত উপাদান।

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

Answer 7

FindEventHandlers একটি jquery প্লাগইন, কাঁচা কোড এখানে: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

ধাপ

1. ক্রোমের কনসোলে কাঁচা কোডটি সরাসরিভাবে আটকান (দ্রষ্টব্য: ইতিমধ্যে জিকিউরিটি লোড হওয়া আবশ্যক)

2. নিম্নলিখিত ফাংশন কলটি ব্যবহার করুন: findEventHandlers(eventType, selector);
   সংশ্লিষ্টটির নির্বাচক নির্দিষ্ট উপাদানের ইভেন্ট টাইপ হ্যান্ডলারটি নির্দিষ্ট করার জন্য।

উদাহরণ :

findEventHandlers("click", "#clickThis");

তারপরে যদি উপলভ্য ইভেন্ট হ্যান্ডলারটি নমুনা দেখায় তবে আপনাকে হ্যান্ডলারটি খুঁজে পেতে প্রসারিত করতে হবে, ডান ফাংশনটি ক্লিক করুন এবং নির্বাচন করুন show function definition

দেখুন: https://blinkcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Answer 8

ক্রোম সংস্করণ 52.0.2743.116 এর জন্য:

1. Chrome এর বিকাশকারী সরঞ্জামগুলিতে, Ctrl+ Shift+ টিপুন দিয়ে 'অনুসন্ধান' প্যানেলটি আনুন F।

2. আপনি যে উপাদানটি খুঁজতে চেষ্টা করছেন তার নামটি টাইপ করুন।

আবদ্ধ উপাদানগুলির জন্য ফলাফলগুলি প্যানেলে উপস্থিত হওয়া উচিত এবং সেগুলিতে যে ফাইলটি অবস্থিত রয়েছে সেটিকে জানিয়ে দেওয়া উচিত।