এজেন্টের জন্য Chrome DevTools আপনার কোডিং এজেন্টকে আপনার অ্যাপ্লিকেশনে ক্লায়েন্ট-সাইড মেমরি লিক (জাভাস্ক্রিপ্ট এবং WebAssembly সহ) বিশ্লেষণ এবং সমাধান করতে দেয়। হিপ স্ন্যাপশটের সংগ্রহ ও বিশ্লেষণ অটোমেট করার মাধ্যমে, আপনার এজেন্ট এমন অবজেক্ট পিনপয়েন্ট করতে পারে যেগুলি সঠিকভাবে গার্বেজ সংগ্রহ করা হচ্ছে না এবং টার্গেট করা কোড রিফ্যাক্টর করার সাজেশন দিতে পারে।
এজেন্টিক ওয়ার্কফ্লোতে, আপনার কোডিং এজেন্ট বিভিন্ন অ্যাপ্লিকেশন স্টেট জুড়ে একাধিক স্ন্যাপশট নেয় এবং বিশেষ বিশ্লেষণ টুল ব্যবহার করে।
মেমরি ডিবাগিং টুল চালু করা
সাধারণত, এজেন্টের জন্য Chrome DevTools শুধুমাত্র take_heapsnapshot
টুল এক্সপোজ করে। হিপ স্ন্যাপশট বিশ্লেষণ করার টুল (যেমন,
compare_heapsnapshots, get_heapsnapshot_summary, এবং
get_heapsnapshot_retaining_paths) শুধুমাত্র তখনই উপলভ্য হয় যখন আপনি
--memoryDebugging ফ্ল্যাগ সহ সার্ভার শুরু করেন। এই ফ্ল্যাগ না থাকলে, আপনার এজেন্ট
স্ন্যাপশট ক্যাপচার করতে পারবে, কিন্তু সেগুলি বিশ্লেষণ করতে পারবে না।
মেমরি ডিবাগিং টুল চালু করতে, আপনার সার্ভার আর্গুমেন্টে --memoryDebugging যোগ করুন:
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
আরও বিকল্পের জন্য, কনফিগারেশন দেখুন।
মেমরি লিকের সাধারণ প্যাটার্ন
মেমরি বিশ্লেষণ সাধারণ লিক প্যাটার্ন খোঁজার উপর ফোকাস করে, যার মধ্যে রয়েছে:
- আনক্লিয়ার্ড ইভেন্ট লিসনার: গ্লোবাল অবজেক্টের সাথে অ্যাটাচ করা ইভেন্ট লিসনার
(যেমন
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 হিসেবে লেবেল করা একাধিক অবজেক্টের সংখ্যা বাড়ছে। এজেন্ট
আপনাকে ফলাফল জানায় এবং null-এ DOM রেফারেন্স হোল্ড করা ভেরিয়েবল সেট করতে
কোড পরিবর্তন করার আগে আপনার কনফার্মেশন চায়।
ক্রমাগত ইন্টার্যাকশনে আনবাউন্ডেড ক্যাশে খুঁজুন
ইনফিনিট স্ক্রলিং বা একটানা ডেটা ফেচ করার মতো ফিচার মেমরি লিক করতে পারে যদি অন্তর্নিহিত অ্যারে বা ম্যাপ কোনও সীমা ছাড়াই অনির্দিষ্টকালের জন্য বৃদ্ধি পায়।
প্রম্পটের উদাহরণ:
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 মেশ পুশ করে, আগেরগুলি গার্বেজ সংগ্রহ না করেই, অবজেক্ট পুনরায় ব্যবহারের জন্য অপ্টিমাইজেশনের পরামর্শ দেয়।