Chrome DevTools দিয়ে অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট ডিবাগ করা

ভূমিকা

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

ভাগ্যক্রমে, এখন Chrome DevTools-এ, আপনি অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট কলব্যাকের সম্পূর্ণ কল স্ট্যাক দেখতে পারেন!

একবার আপনি DevTools-এ async কল স্ট্যাক বৈশিষ্ট্য সক্ষম করলে, আপনি বিভিন্ন সময়ে আপনার ওয়েব অ্যাপের অবস্থার মধ্যে ড্রিল করতে সক্ষম হবেন। কিছু ইভেন্ট শ্রোতা, setInterval , setTimeout , XMLHttpRequest , প্রতিশ্রুতি, requestAnimationFrame , MutationObservers , এবং আরও অনেক কিছুর জন্য সম্পূর্ণ স্ট্যাক ট্রেস হাঁটুন৷

আপনি স্ট্যাক ট্রেস চলার সময়, আপনি রানটাইম নির্বাহের সেই নির্দিষ্ট বিন্দুতে যে কোনও ভেরিয়েবলের মান বিশ্লেষণ করতে পারেন। এটা আপনার ঘড়ি এক্সপ্রেশন জন্য একটি টাইম মেশিন মত!

আসুন এই বৈশিষ্ট্যটি সক্ষম করি এবং এই কয়েকটি দৃশ্যের দিকে নজর দিন।

Chrome-এ অ্যাসিঙ্ক ডিবাগিং সক্ষম করুন

Chrome-এ এটি সক্ষম করে এই নতুন বৈশিষ্ট্যটি ব্যবহার করে দেখুন। Chrome Canary DevTools এর উৎস প্যানেলে যান।

ডানদিকে কল স্ট্যাক প্যানেলের পাশে, "Async" এর জন্য একটি নতুন চেকবক্স রয়েছে। অ্যাসিঙ্ক ডিবাগিং চালু বা বন্ধ করতে চেকবক্সে টগল করুন। (যদিও এটি একবার চালু হয়ে গেলে, আপনি কখনোই এটি বন্ধ করতে চাইবেন না।)

বিলম্বিত টাইমার ইভেন্ট এবং XHR প্রতিক্রিয়া ক্যাপচার করুন

আপনি সম্ভবত Gmail এ এটি আগে দেখেছেন:

রিকোয়েস্ট পাঠাতে সমস্যা হলে (হয় সার্ভারে সমস্যা হচ্ছে বা ক্লায়েন্ট সাইডে নেটওয়ার্ক কানেক্টিভিটি সমস্যা আছে), Gmail স্বয়ংক্রিয়ভাবে অল্প সময়ের পরে বার্তাটি পুনরায় পাঠানোর চেষ্টা করবে।

কীভাবে অ্যাসিঙ্ক কল স্ট্যাকগুলি আমাদের বিলম্বিত টাইমার ইভেন্ট এবং এক্সএইচআর প্রতিক্রিয়া বিশ্লেষণ করতে সহায়তা করতে পারে তা দেখতে, আমি একটি উপহাস Gmail উদাহরণ দিয়ে সেই প্রবাহটিকে পুনরায় তৈরি করেছি। সম্পূর্ণ জাভাস্ক্রিপ্ট কোড উপরের লিঙ্কে পাওয়া যাবে কিন্তু প্রবাহটি নিম্নরূপ:

DevTools-এর পূর্ববর্তী সংস্করণগুলিতে শুধুমাত্র কল স্ট্যাক প্যানেলটি দেখে, postOnFail() এর মধ্যে একটি ব্রেকপয়েন্ট আপনাকে postOnFail() কোথা থেকে কল করা হয়েছে সে সম্পর্কে সামান্য তথ্য দেবে। কিন্তু অ্যাসিঙ্ক স্ট্যাকগুলি চালু করার সময় পার্থক্যটি দেখুন:

অ্যাসিঙ্ক কল স্ট্যাকগুলি চালু করার সাথে, আপনি submitHandler() (যা সাবমিট বোতামে ক্লিক করার পরে ঘটে) বা retrySubmit() (যা setTimeout() বিলম্বের পরে ঘটেছিল থেকে অনুরোধটি শুরু হয়েছে কিনা তা সহজেই দেখতে আপনি সম্পূর্ণ কল স্ট্যাকটি দেখতে পারেন। :

অ্যাসিঙ্ক্রোনাসভাবে এক্সপ্রেশন দেখুন

আপনি যখন সম্পূর্ণ কল স্ট্যাকে হাঁটবেন, তখন আপনার দেখা অভিব্যক্তিগুলিও সেই সময়ে যে অবস্থায় ছিল তা প্রতিফলিত করতে আপডেট হবে!

অতীত স্কোপ থেকে কোড মূল্যায়ন

শুধু এক্সপ্রেশন দেখার পাশাপাশি, আপনি DevTools JavaScript কনসোল প্যানেলে আগের স্কোপ থেকে আপনার কোডের সাথে ইন্টারঅ্যাক্ট করতে পারেন।

কল্পনা করুন যে আপনি ড. যিনি এবং আপনার "এখন" টারডিসে আসার আগে থেকে ঘড়ির তুলনা করার জন্য একটু সাহায্যের প্রয়োজন। DevTools কনসোল থেকে, আপনি সহজেই বিভিন্ন এক্সিকিউশন পয়েন্ট জুড়ে মানগুলির মূল্যায়ন, সঞ্চয় এবং গণনা করতে পারেন।

আপনার এক্সপ্রেশন ম্যানিপুলেট করার জন্য DevTools-এর মধ্যে থাকা আপনাকে আপনার সোর্স কোডে ফিরে যেতে, সম্পাদনা করতে এবং ব্রাউজার রিফ্রেশ করার থেকে সময় বাঁচাবে।

শৃঙ্খলিত প্রতিশ্রুতি রেজোলিউশনগুলি উন্মোচন করুন

আপনি যদি মনে করেন যে অ্যাসিঙ্ক কল স্ট্যাক বৈশিষ্ট্যটি সক্ষম না করে পূর্বের মক জিমেইল ফ্লোটি উন্মোচন করা কঠিন ছিল, আপনি কি কল্পনা করতে পারেন যে শৃঙ্খলিত প্রতিশ্রুতির মতো আরও জটিল অ্যাসিঙ্ক্রোনাস প্রবাহের সাথে এটি কতটা কঠিন হবে? জাভাস্ক্রিপ্ট প্রতিশ্রুতিতে জেক আর্কিবল্ডের টিউটোরিয়ালের চূড়ান্ত উদাহরণটি আবার দেখা যাক।

এখানে Jake এর async-best-example.html উদাহরণে কল স্ট্যাক চলার একটি ছোট অ্যানিমেশন।

আপনার ওয়েব অ্যানিমেশন মধ্যে অন্তর্দৃষ্টি পান

HTML5Rocks আর্কাইভের আরও গভীরে যাওয়া যাক। অনুরোধ অ্যানিমেশনফ্রেমের সাথে পল লুইসের লীনার, মিনারের, দ্রুত অ্যানিমেশনের কথা মনে আছে?

RequestAnimationFrame ডেমো খুলুন এবং post.html এর update() পদ্ধতির শুরুতে (874 লাইনের কাছাকাছি) একটি ব্রেকপয়েন্ট যোগ করুন। অ্যাসিঙ্ক কল স্ট্যাকের সাহায্যে আমরা রিকোয়েস্ট অ্যানিমেশনফ্রেম -এ অনেক বেশি অন্তর্দৃষ্টি পাই, যার মধ্যে স্ক্রোল ইভেন্ট কলব্যাক শুরু করার সমস্ত পথ হাঁটার ক্ষমতা রয়েছে।

MutationObserver ব্যবহার করার সময় DOM আপডেটগুলি ট্র্যাক করুন৷

MutationObserver আমাদের DOM-এ পরিবর্তনগুলি পর্যবেক্ষণ করতে দেয়। এই সাধারণ উদাহরণে , যখন আপনি বোতামে ক্লিক করেন, একটি নতুন DOM নোড <div class="rows"></div> এ যুক্ত হয়।

demo.html এ nodeAdded() (লাইন 31) এর মধ্যে একটি ব্রেকপয়েন্ট যোগ করুন। অ্যাসিঙ্ক কল স্ট্যাকগুলি সক্ষম করার সাথে, আপনি এখন প্রাথমিক ক্লিক ইভেন্টে addNode() মাধ্যমে কল স্ট্যাকটিকে ফিরে যেতে পারেন।

অ্যাসিঙ্ক কল স্ট্যাকগুলিতে জাভাস্ক্রিপ্ট ডিবাগ করার জন্য টিপস৷

আপনার ফাংশন নাম দিন

আপনি যদি আপনার সমস্ত কলব্যাকগুলিকে বেনামী ফাংশন হিসাবে বরাদ্দ করার প্রবণতা রাখেন, তাহলে আপনি কল স্ট্যাকটি দেখতে সহজ করার জন্য পরিবর্তে তাদের একটি নাম দিতে চাইতে পারেন।

উদাহরণস্বরূপ, এই মত একটি বেনামী ফাংশন নিন:

window.addEventListener('load', function() {
  // do something
});

এবং windowLoaded() মত একটি নাম দিন:

window.addEventListener('load', function <strong>windowLoaded</strong>(){
  // do something
});

যখন লোড ইভেন্ট ফায়ার হয়, তখন এটি ক্রিপ্টিক " (বেনামী ফাংশন) " এর পরিবর্তে তার ফাংশনের নাম সহ DevTools স্ট্যাক ট্রেসে প্রদর্শিত হবে৷ এটি আপনার স্ট্যাক ট্রেসে কী ঘটছে তা এক নজরে দেখতে আরও সহজ করে তোলে।

আরো অন্বেষণ

রিক্যাপ করার জন্য, এগুলি হল সমস্ত অ্যাসিঙ্ক্রোনাস কলব্যাক যেখানে DevTools সম্পূর্ণ কল স্ট্যাক প্রদর্শন করবে:

• টাইমার : যেখানে setTimeout() বা setInterval() শুরু করা হয়েছিল সেখানে ফিরে যান।
• XHRs : যেখানে xhr.send() বলা হয়েছিল সেখানে ফিরে যান।
• অ্যানিমেশন ফ্রেম : যেখানে requestAnimationFrame বলা হয়েছিল সেখানে ফিরে যান।
• প্রতিশ্রুতি : যেখানে একটি প্রতিশ্রুতি সমাধান করা হয়েছে সেখানে ফিরে যান।
• Object.observe : যেখানে পর্যবেক্ষক কলব্যাক মূলত আবদ্ধ ছিল সেখানে ফিরে যান।
• মিউটেশন অবজারভার : যেখানে মিউটেশন অবজারভার ইভেন্টটি বরখাস্ত করা হয়েছিল সেখানে ফিরে যান।
• window.postMessage() : ইন্ট্রা-প্রসেস মেসেজিং কলের উপর হাঁটুন।
• DataTransferItem.getAsString()
• ফাইলসিস্টেম এপিআই
• ইনডেক্সডডিবি
• ওয়েবএসকিউএল
• addEventListener() মাধ্যমে যোগ্য DOM ইভেন্ট : যেখানে ইভেন্টটি চালানো হয়েছিল সেখানে ফিরে যান। কার্যক্ষমতার কারণে, সমস্ত DOM ইভেন্ট অ্যাসিঙ্ক কল স্ট্যাক বৈশিষ্ট্যের জন্য যোগ্য নয়। বর্তমানে উপলব্ধ ইভেন্টগুলির উদাহরণগুলির মধ্যে রয়েছে: 'স্ক্রোল', 'হ্যাশচেঞ্জ' এবং 'নির্বাচন পরিবর্তন'।
• addEventListener() মাধ্যমে মাল্টিমিডিয়া ইভেন্ট : যেখানে ইভেন্টটি চালানো হয়েছিল সেখানে ফিরে যান। উপলব্ধ মাল্টিমিডিয়া ইভেন্টগুলির মধ্যে রয়েছে: অডিও এবং ভিডিও ইভেন্ট (যেমন 'প্লে', 'পজ', 'রেট চেঞ্জ'), WebRTC MediaStreamTrackList ইভেন্ট (যেমন 'addtrack', 'removetrack'), এবং MediaSource ইভেন্ট (যেমন 'sourceopen')।

আপনার জাভাস্ক্রিপ্ট কলব্যাকগুলির সম্পূর্ণ স্ট্যাক ট্রেস দেখতে সক্ষম হলে সেই চুলগুলি আপনার মাথায় রাখা উচিত। DevTools-এ এই বৈশিষ্ট্যটি বিশেষভাবে সহায়ক হবে যখন একাধিক অ্যাসিঙ্ক ইভেন্ট একে অপরের সাথে সম্পর্কিত হয়, বা যদি একটি অসিঙ্ক কলব্যাকের মধ্যে থেকে একটি অঘোষিত ব্যতিক্রম নিক্ষেপ করা হয়।

Chrome এ একবার চেষ্টা করে দেখুন। এই নতুন বৈশিষ্ট্যের বিষয়ে আপনার মতামত থাকলে, Chrome DevTools বাগ ট্র্যাকারে বা Chrome DevTools গ্রুপে আমাদের একটি লাইন দিন।