এজেন্টদের জন্য ক্রোম ডেভটুলস আপনার কোডিং এজেন্টকে অ্যাপ্লিকেশনের ক্লায়েন্ট-সাইড মেমরি লিক (জাভাস্ক্রিপ্ট এবং ওয়েবঅ্যাসেম্বলি সহ) বিশ্লেষণ ও সমাধান করতে সাহায্য করে। হিপ স্ন্যাপশট সংগ্রহ ও বিশ্লেষণকে স্বয়ংক্রিয় করার মাধ্যমে, আপনার এজেন্ট সেইসব অবজেক্ট চিহ্নিত করতে পারে যেগুলো সঠিকভাবে গার্বেজ কালেক্টেড হচ্ছে না এবং নির্দিষ্ট কোড রিফ্যাক্টরিংয়ের পরামর্শ দিতে পারে।
একটি এজেন্টিক ওয়ার্কফ্লোতে, আপনার কোডিং এজেন্ট অ্যাপ্লিকেশনের বিভিন্ন অবস্থা থেকে একাধিক স্ন্যাপশট নেয় এবং বিশেষায়িত বিশ্লেষণ সরঞ্জাম ব্যবহার করে।
সাধারণ স্মৃতি ফাঁসের ধরণ
স্মৃতি বিশ্লেষণে স্মৃতিশক্তি হ্রাসের সাধারণ ধরণগুলো খুঁজে বের করার উপর মনোযোগ দেওয়া হয়, যার মধ্যে অন্তর্ভুক্ত রয়েছে:
- অপরিষ্কার ইভেন্ট লিসেনার: গ্লোবাল অবজেক্টের (যেমন
windowবাdocument) সাথে সংযুক্ত এমন ইভেন্ট লিসেনার যা গার্বেজ কালেকশনকে বাধা দেয়। - বিচ্ছিন্ন DOM নোড: যে নোডগুলো ডকুমেন্ট ট্রি থেকে সরিয়ে ফেলা হয়েছে কিন্তু একটি জাভাস্ক্রিপ্ট ভেরিয়েবল দ্বারা এখনও ব্যবহৃত হয়।
- অনিচ্ছাকৃত গ্লোবাল ভেরিয়েবল: যথাযথ স্কোপিং ছাড়া ঘোষিত ভেরিয়েবল যা মেমরিতে চিরস্থায়ীভাবে থেকে যায়।
- ক্লোজার: যে ক্লোজারগুলো অনিচ্ছাকৃতভাবে বড় অবজেক্টের রেফারেন্সগুলোকে তাদের নিজস্ব স্কোপের মধ্যে রেখে দেয়।
- অসীম ডেটা স্ট্রাকচার: ক্যাশিংয়ের জন্য ব্যবহৃত ডেটা স্ট্রাকচার যা কোনো সীমা ছাড়াই বৃদ্ধি পায়।
স্মৃতি বিশ্লেষণের জন্য বিবেচ্য বিষয়সমূহ
স্মৃতি বিশ্লেষণ ব্যবহার করার সময় নিম্নলিখিত বিষয়গুলো মনে রাখবেন:
সরাসরি র স্ন্যাপশট পড়বেন না: আপনার এজেন্টকে সরাসরি র
.heapsnapshotফাইল পড়তে দেবেন না। এগুলি অনেক বড় এবং কনটেক্সট সীমা অতিক্রম করে। মেমরি লিক ডিবাগিং স্কিলটি এজেন্টদের এই ফাইলগুলি পড়া থেকে বিরত থাকার জন্য স্পষ্টভাবে নির্দেশ দেয়।তিন-স্ন্যাপশট পদ্ধতি: নির্ভরযোগ্যভাবে মেমরি লিক খুঁজে বের করার জন্য, আপনার এজেন্টের সাধারণত তিনটি স্ন্যাপশট ক্যাপচার করার প্রয়োজন হয়: কাজটি করার আগে একটি বেসলাইন, কাজটি করার পরে একটি টার্গেট, এবং কাজটি পূর্বাবস্থায় ফিরিয়ে আনার পরে একটি চূড়ান্ত স্ন্যাপশট। উল্লেখ্য যে, কিছু কাজ, যেমন টাইমার (
setTimeout) বা অ্যানিমেশন (requestAnimationFrame) দ্বারা চালিত কাজগুলো, ব্যবহারকারীর কোনো ইন্টারঅ্যাকশন ছাড়াই ঘটে এবং সেগুলোর জন্য পূর্বাবস্থায় ফিরিয়ে আনার ধাপের প্রয়োজন নাও হতে পারে।মনে রাখবেন যে, টাইমার (
setTimeout) বা অ্যানিমেশন (requestAnimationFrame) দ্বারা চালিত কিছু কাজ ব্যবহারকারীর হস্তক্ষেপ ছাড়াই ঘটে এবং তারপরেও মেমরি ব্যবহার বাড়িয়ে দিতে পারে।সংশোধন করার আগে যাচাই করুন: এজেন্টের প্রাপ্ত ফলাফল সর্বদা পর্যালোচনা করে নিশ্চিত করুন যে এর প্রস্তাবিত পদক্ষেপগুলো আপনার অ্যাপ্লিকেশনের লজিকের জন্য প্রযোজ্য ও সঠিক। উদাহরণস্বরূপ, এজেন্টকে রেফারেন্সগুলো বাতিল করার নির্দেশ দেওয়ার আগে নিশ্চিত হয়ে নিন যে একটি বিচ্ছিন্ন নোড কোনো ইচ্ছাকৃত ক্যাশের অংশ কি না।
মেমরি লিক বিশ্লেষণের জন্য ব্যবহারের ক্ষেত্রসমূহ
আপনার এজেন্টকে নির্দেশ দিন যেন এটি টাইমার এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের মতো পুনরাবৃত্তিমূলক কাজ চলাকালীন ম্যানুয়ালি স্ন্যাপশট নেওয়া এবং হাতে ধরে সেগুলোর পার্থক্য নির্ণয় করার পরিবর্তে মেমরি প্রোফাইল করে। এই ওয়ার্কফ্লোগুলোর মাধ্যমে আপনার ডিবাগিং প্রক্রিয়ায় মেমরি বিশ্লেষণকে একীভূত করুন।
দ্রষ্টব্য: এজেন্টের কার্য সম্পাদনের ধাপগুলো সম্ভাব্য আচরণের উদাহরণ। আপনার এজেন্ট ভিন্নভাবে কাজ করতে পারে।
নেভিগেশনের সময় অমার্জিত ইভেন্ট লিসেনারগুলি সনাক্ত করুন
সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPA)-গুলোতে প্রায়শই মেমোরি লিক হয়, যখন ডেভেলপাররা কোনো কম্পোনেন্ট আনমাউন্ট হওয়ার পর গ্লোবাল ইভেন্ট লিসেনারগুলো সরাতে ভুলে যান। ভিউগুলোর মধ্যে নেভিগেট করার সময় মেমোরি সঠিকভাবে মুক্ত হচ্ছে কিনা, তা যাচাই করার জন্য আপনি আপনার এজেন্টকে দায়িত্ব দিতে পারেন।
উদাহরণ প্রম্পট:
Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.
এজেন্টের কার্য সম্পাদনের উদাহরণ: আপনার এজেন্ট হোম পেজে একটি বেসলাইন হিপ স্ন্যাপশট নেয়, ড্যাশবোর্ডে যায় এবং একটি চূড়ান্ত স্ন্যাপশট নেওয়ার জন্য আবার হোম পেজে ফিরে আসে। এরপর এটি স্ন্যাপশটগুলো মূল্যায়ন করার জন্য অভ্যন্তরীণ বিশ্লেষণ টুল ব্যবহার করে, শনাক্ত করে যে window অবজেক্টের সাথে সংযুক্ত একটি scroll লিসেনার কখনও ক্লিয়ার করা হয়নি, এবং আপনার কম্পোনেন্টের ক্লিনআপ ফাংশনে removeEventListener কল করার জন্য নির্দিষ্ট কোড সরবরাহ করে।
UI উপাদানগুলিতে বিচ্ছিন্ন DOM নোডগুলি সনাক্ত করুন
মোডাল, ড্রপডাউন এবং জটিল UI কম্পোনেন্টগুলোকে DOM থেকে সরিয়ে ফেলার পরেও যদি জাভাস্ক্রিপ্ট ভেরিয়েবলে তাদের রেফারেন্স রাখা হয়, তবে প্রায়শই সেগুলো বিচ্ছিন্ন DOM নোড রেখে যায়।
উদাহরণ প্রম্পট:
Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.
এজেন্টের কার্য সম্পাদনের উদাহরণ: আপনার এজেন্ট প্রয়োজনীয় বেসলাইন, টার্গেট এবং ফাইনাল স্ন্যাপশট সংগ্রহ করার সময় সেটিংস মডালের সাথে ইন্টারঅ্যাক্ট করে। বিশ্লেষণে ‘Detached HTMLDivElement’ লেবেলযুক্ত বেশ কয়েকটি ক্রমবর্ধমান অবজেক্ট প্রকাশ পায়। এজেন্ট আপনাকে এই ফলাফল সম্পর্কে অবহিত করে এবং DOM রেফারেন্স ধারণকারী ভেরিয়েবলগুলোকে null সেট করার জন্য কোড পরিবর্তন করার আগে আপনার নিশ্চিতকরণ চায়।
অবিচ্ছিন্ন মিথস্ক্রিয়ায় অসীম ক্যাশে খুঁজুন
ইনফিনিট স্ক্রলিং বা ক্রমাগত ডেটা আনার মতো বৈশিষ্ট্যগুলো থেকে মেমোরি লিক হতে পারে, যদি অন্তর্নিহিত অ্যারে বা ম্যাপগুলো কোনো সীমা ছাড়াই অনির্দিষ্টকালের জন্য বাড়তে থাকে।
উদাহরণ প্রম্পট:
Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.
এজেন্টের কার্য সম্পাদনের উদাহরণ: আপনার এজেন্ট স্ক্রোল করার আগে ও পরে মেমোরির অবস্থা বিশ্লেষণ করে। এটি এমন একটি ক্লোজার শনাক্ত করে যা অনিচ্ছাকৃতভাবে একটি বিশাল অ্যারে ক্যাপচার করে, যা সীমাহীনভাবে বাড়তে থাকে। এজেন্টটি সঠিক গার্বেজ কালেকশন নিশ্চিত করার জন্য ক্যাশিং লিমিট প্রয়োগ করতে অথবা অবজেক্টের জীবনচক্রের সাথে সম্পর্কিত ডেটার জন্য একটি WeakMap ব্যবহার করার পরামর্শ দেয়।
ব্যাকগ্রাউন্ড প্রসেসগুলিতে মেমরি লিক ডিবাগ করুন
অ্যানিমেশন এবং ব্যাকগ্রাউন্ড টাইমার ব্যবহারকারীর সুস্পষ্ট হস্তক্ষেপ ছাড়াই মেমরি লিক করতে পারে। এই প্রসেসগুলোর মেমরি লিক খুঁজে বের করার জন্য আপনি আপনার এজেন্টকে সময়ের সাথে সাথে মেমরির বৃদ্ধি পর্যবেক্ষণ করার নির্দেশ দিতে পারেন।
উদাহরণ প্রম্পট:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
এজেন্টের কার্য সম্পাদনের উদাহরণ: আপনার এজেন্ট ক্যানভাস অ্যাপ্লিকেশনটি অন্বেষণ করে এবং সময়ের সাথে সাথে মেমরি ব্যবহার নিরীক্ষণের জন্য স্বয়ংক্রিয়ভাবে পর্যায়ক্রমিক স্ন্যাপশট নেয়। এটি হিপ বিশ্লেষণ করে এবং শনাক্ত করে যে রেন্ডারিং লুপটি পূর্ববর্তী মেশগুলোকে গার্বেজ কালেক্ট না করেই প্রতিটি ফ্রেমে নতুন WebGL মেশগুলোকে একটি অ্যারেতে পুশ করছে, যা অবজেক্ট পুনঃব্যবহারের জন্য অপ্টিমাইজেশনের পরামর্শ দেয়।