সমাধান 1: ফ্রেমওয়ার্ক ব্ল্যাকবক্সিং
দুর্দান্ত, ন্যূনতম সেটআপ এবং কোনও তৃতীয় পক্ষের কাজ করে।
ক্রোমের ডকুমেন্টেশন অনুসারে :
আপনি যখন কোনও স্ক্রিপ্ট ব্ল্যাকবক্স করবেন তখন কি হবে?
লাইব্রেরি কোড থেকে নিক্ষিপ্ত ব্যতিক্রমগুলি বিরতি দেবে না (যদি ব্যতিক্রমগুলিতে বিরতি সক্ষম করা থাকে), লাইব্রেরি কোডটি বাইপাস / আউট / এড়িয়ে যায়, ইভেন্ট শ্রোতার ব্রেকপয়েন্টগুলি লাইব্রেরি কোডে ভাঙবে না, ডিবাগার লাইব্রেরিতে সেট করা কোনও ব্রেকপয়েন্টগুলিতে বিরতি দেবে না কোড। শেষ ফলাফলটি আপনি তৃতীয় পক্ষের সংস্থানগুলির পরিবর্তে আপনার অ্যাপ্লিকেশন কোডটি ডিবাগ করছেন ।
এখানে আপডেট ওয়ার্কফ্লো রয়েছে:
- উন্মুক্ত ক্রোম বিকাশকারী সরঞ্জামগুলি ( F12বা ⌘+ ⌥+ i) পপ করুন , সেটিংসে যান (উপরের ডানদিকে, বা F1)। " ব্ল্যাকবক্সিং " নামে বাম দিকে একটি ট্যাব সন্ধান করুন
- আপনি এখানে ডিবাগ করার সময় ক্রোমকে যে বিষয়গুলি অগ্রাহ্য করতে চান তার রেগেক্স প্যাটার্নটি আপনি রেখেছেন । উদাহরণস্বরূপ:
jquery\..*\.js
(গ্লোব প্যাটার্ন / মানব অনুবাদ jquery.*.js
:)
- আপনি যদি একাধিক নিদর্শন দিয়ে ফাইলগুলি এড়িয়ে যেতে চান তবে আপনি পাইপ চরিত্রটি ব্যবহার করে এগুলি যুক্ত করতে পারেন
|
: jquery\..*\.js|include\.postload\.js
(যা "বা এই প্যাটার্ন" এর মতো কাজ করে) তাই বলতে পারেন them বা "অ্যাড" বোতামটি যুক্ত করে রাখুন।
- নীচে বর্ণিত সমাধান 3 অবিরত করুন ।
বোনাস টিপ! আমি নিয়মিতভাবে Regex101 ব্যবহার করি (তবে আরও অনেকগুলি রয়েছে:) দ্রুত আমার মরিচা রিজেক্স নিদর্শনগুলি পরীক্ষা করতে এবং ধাপে ধাপে রেজেক্স ডিবাগারের সাথে আমি কোথায় ভুল করছি তা সন্ধান করতে। আপনি যদি নিয়মিত এক্সপ্রেশনগুলিতে এখনও "সাবলীল" না হন তবে আমি আপনাকে প্রস্তাব দিই যে আপনি http://buildregex.com/ এবং https://www.debuggex.com/ এর মতো লিখিত এবং কল্পনা করতে এমন সাইটগুলি ব্যবহার শুরু করুন
উত্স প্যানেলে কাজ করার সময় আপনি প্রসঙ্গ মেনুও ব্যবহার করতে পারেন। কোনও ফাইল দেখার সময়, আপনি সম্পাদকটিতে ডান ক্লিক করতে পারেন এবং ব্ল্যাকবক্স স্ক্রিপ্টটি চয়ন করতে পারেন। এটি সেটিংস প্যানেলে তালিকায় ফাইলটি যুক্ত করবে:
সমাধান 2: ভিজ্যুয়াল ইভেন্ট
এটি একটি দুর্দান্ত সরঞ্জাম :
ভিজ্যুয়াল ইভেন্ট একটি ওপেন-সোর্স জাভাস্ক্রিপ্ট বুকমার্কলেট যা ডিওএম উপাদানগুলির সাথে সংযুক্ত থাকা ইভেন্টগুলি সম্পর্কে ডিবাগিং তথ্য সরবরাহ করে। ভিজ্যুয়াল ইভেন্ট শো:
- কোন উপাদানগুলির সাথে ইভেন্টগুলি সংযুক্ত রয়েছে
- কোনও উপাদানের সাথে সংযুক্ত ইভেন্টের ধরণ
- ইভেন্টটি দিয়ে চালিত করা কোডটি ট্রিগার করা হয়েছে
- সংযুক্ত ফাংশনটি সংজ্ঞায়িত করা হয়েছিল তার জন্য উত্স ফাইল এবং লাইন নম্বর (ওয়েবকিট ব্রাউজার এবং কেবল অপেরা)
সমাধান 3: ডিবাগিং
আপনি পৃষ্ঠার কোথাও ক্লিক করার সময়, বা ডিওএম সংশোধন করার সময় ... এবং অন্যান্য ধরণের জেএস ব্রেক-পয়েন্টগুলি কোডটি বিরতি দিতে পারবেন যা জানার জন্য কার্যকর হবে। দুঃস্বপ্ন এড়াতে আপনার এখানে ব্ল্যাকবক্সিং প্রয়োগ করা উচিত ।
এই উদাহরণে, আমি যখন বোতামটি ক্লিক করি তখন ঠিক কী হয় তা জানতে চাই।
দেব সরঞ্জাম -> উত্স ট্যাব এবং ডানদিকে খুলুন Event
Listener Breakpoints
:
প্রসারিত করুন Mouse
এবং নির্বাচন করুনclick
- এখন উপাদানটিতে ক্লিক করুন (মৃত্যুদন্ড কার্যকর হওয়া উচিত) এবং আপনি এখন কোডটি ডিবাগ করছেন। আপনি সমস্ত কোড টিপে যেতে পারেন F11(যা স্টেপ ইন )। অথবা স্ট্যাকের কয়েকটি জাম্প ফিরে যান। এক টন লাফ দেওয়া যেতে পারে
সমাধান 4: ফিশিং কীওয়ার্ড
দেব সরঞ্জামগুলি সক্রিয় করার সাথে আপনি পুরো কোডবেস (সমস্ত ফাইলের সমস্ত কোড) ⌘+ ⌥+ Fবা সহ সন্ধান করতে পারেন :
এবং অনুসন্ধান #envio
বা যে কোনও ট্যাগ / শ্রেণি / আইডি যা ভাবেন তা পার্টি শুরু করে এবং আপনি প্রত্যাশার চেয়ে আরও দ্রুত পেতে পারেন।
সচেতন থাকুন কখনও কখনও কেবলমাত্র একটি না img
কিন্তু প্রচুর উপাদান স্তুপীকৃত থাকে এবং আপনি জানেন না যে কোনটি কোডটি ট্রিগার করে।
এটি আপনার জ্ঞান থেকে কিছুটা দূরে থাকলে, ডিবাগিং সম্পর্কিত ক্রোমের টিউটোরিয়ালটি একবার দেখুন ।
Visual Event
বুকমার্কলেট ব্যবহার করি । এটি জনপ্রিয় লাইব্রেরিগুলিতে আবদ্ধ ক্লিক ইভেন্টগুলি সনাক্ত করে এবং সাইটের একটি ওভারলে তৈরি করে যেখানে ইভেন্টগুলি আবদ্ধ এবং প্রতিটি ইভেন্টের জন্য কোডের নমুনা এবং উত্সের অবস্থান প্রদান করছে showing