एजेंट के लिए Chrome DevTools की मदद से, कोडिंग एजेंट आपके ऐप्लिकेशन में क्लाइंट-साइड मेमोरी लीक (JavaScript और WebAssembly सहित) का विश्लेषण और उन्हें ठीक कर सकता है. हीप स्नैपशॉट इकट्ठा करने और उनका विश्लेषण करने की प्रोसेस को ऑटोमेट करके, आपका एजेंट उन ऑब्जेक्ट की पहचान कर सकता है जिन्हें सही तरीके से गार्बेज कलेक्शन में शामिल नहीं किया जा रहा है. साथ ही, यह कोड को बेहतर बनाने के लिए सुझाव भी दे सकता है.
एजेंटिक वर्कफ़्लो में, आपका कोडिंग एजेंट ऐप्लिकेशन की अलग-अलग स्थितियों के कई स्नैपशॉट लेता है और विश्लेषण के खास टूल का इस्तेमाल करता है.
मेमोरी डीबग करने वाले टूल चालू करना
डिफ़ॉल्ट रूप से, एजेंट के लिए Chrome DevTools में सिर्फ़ take_heapsnapshot टूल उपलब्ध होता है. हीप स्नैपशॉट का विश्लेषण करने वाले टूल (उदाहरण के लिए, compare_heapsnapshots, get_heapsnapshot_summary, और get_heapsnapshot_retaining_paths) सिर्फ़ तब उपलब्ध होते हैं, जब --memoryDebugging फ़्लैग के साथ सर्वर शुरू किया जाता है. इस फ़्लैग के बिना, आपका एजेंट स्नैपशॉट कैप्चर कर सकता है, लेकिन उनका विश्लेषण नहीं कर सकता.
मेमोरी डीबग करने वाले टूल चालू करने के लिए, अपने सर्वर के आर्ग्युमेंट में --memoryDebugging जोड़ें:
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
ज़्यादा विकल्पों के लिए, कॉन्फ़िगरेशन देखें.
मेमोरी लीक के सामान्य पैटर्न
मेमोरी के विश्लेषण में, लीक के सामान्य पैटर्न ढूंढने पर फ़ोकस किया जाता है. इनमें ये पैटर्न शामिल हैं:
- इवेंट लिसनर साफ़ न करना: ग्लोबल ऑब्जेक्ट (जैसे,
windowयाdocument) से जुड़े इवेंट लिसनर, जो गार्बेज कलेक्शन को रोकते हैं. - अलग किए गए डीओएम नोड: दस्तावेज़ ट्री से हटाए गए नोड, लेकिन अब भी JavaScript वैरिएबल से रेफ़र किए जा रहे हैं.
- अनजाने में बनाए गए ग्लोबल वैरिएबल: सही स्कोपिंग के बिना घोषित किए गए वैरिएबल, जो हमेशा मेमोरी में बने रहते हैं.
- क्लोज़र: क्लोज़र जो अनजाने में अपने स्कोप में बड़े ऑब्जेक्ट के रेफ़रंस रखते हैं.
- अनबाउंड डेटा स्ट्रक्चर: कैशिंग के लिए इस्तेमाल किए जाने वाले डेटा स्ट्रक्चर, जो बिना किसी सीमा के बढ़ते हैं.
मेमोरी के विश्लेषण से जुड़ी ज़रूरी बातें
मेमोरी का विश्लेषण करते समय, इन बातों का ध्यान रखें:
रॉ स्नैपशॉट को सीधे न पढ़ें: अपने एजेंट को सीधे तौर पर रॉ
.heapsnapshotफ़ाइलें न पढ़ने दें. ये फ़ाइलें बहुत बड़ी होती हैं और कॉन्टेक्स्ट की सीमाओं से ज़्यादा होती हैं. मेमोरी लीक डीबग करने की स्किल, एजेंट को साफ़ तौर पर इन फ़ाइलों को न पढ़ने का निर्देश देती है.तीन स्नैपशॉट वाली प्रोसेस: लीक का पता लगाने के लिए, आपके एजेंट को आम तौर पर तीन स्नैपशॉट कैप्चर करने की ज़रूरत होती है: कार्रवाई से पहले का बेसलाइन स्नैपशॉट, कार्रवाई के बाद का टारगेट स्नैपशॉट, और कार्रवाई को वापस लाने के बाद का फ़ाइनल स्नैपशॉट. ध्यान दें कि कुछ कार्रवाइयां, जैसे कि टाइमर (
setTimeout) या ऐनिमेशन (requestAnimationFrame) से ट्रिगर होने वाली कार्रवाइयां, उपयोगकर्ता के इंटरैक्शन के बिना होती हैं. इनके लिए, कार्रवाई को वापस लाने वाले चरण की ज़रूरत नहीं हो सकती है.ध्यान दें कि कुछ कार्रवाइयां, जैसे कि टाइमर (
setTimeout) या ऐनिमेशन (requestAnimationFrame) से ट्रिगर होने वाली कार्रवाइयां, उपयोगकर्ता के इंटरैक्शन के बिना होती हैं. इनसे मेमोरी का इस्तेमाल बढ़ सकता है.ठीक करने से पहले पुष्टि करें: एजेंट के नतीजों की हमेशा समीक्षा करें, ताकि यह पक्का किया जा सके कि आपके ऐप्लिकेशन की लॉजिक के लिए, उसके सुझाए गए ऐक्शन सही हैं और लागू किए जा सकते हैं. उदाहरण के लिए, एजेंट को रेफ़रंस को रद्द करने का निर्देश देने से पहले, पुष्टि करें कि अलग किया गया नोड, जान-बूझकर बनाए गए कैश का हिस्सा है या नहीं.
मेमोरी लीक के विश्लेषण के इस्तेमाल के उदाहरण
अपने एजेंट को बार-बार की जाने वाली कार्रवाइयों के दौरान, मेमोरी की प्रोफ़ाइल बनाने का निर्देश दें. इनमें टाइमर और उपयोगकर्ता के इंटरैक्शन शामिल हैं. ऐसा करने से, आपको मैन्युअल तरीके से स्नैपशॉट लेने और उन्हें अलग-अलग करने की ज़रूरत नहीं पड़ेगी. इन वर्कफ़्लो की मदद से, डीबग करने की प्रोसेस में मेमोरी के विश्लेषण को इंटिग्रेट करें.
ध्यान दें: एजेंट के एक्ज़ीक्यूशन के चरण, संभावित व्यवहार के उदाहरण हैं. आपका एजेंट अलग तरीके से काम कर सकता है.
नेविगेट करते समय, साफ़ न किए गए इवेंट लिसनर का पता लगाना
सिंगल-पेज ऐप्लिकेशन (एसपीए) में अक्सर मेमोरी लीक होती है. ऐसा तब होता है, जब डेवलपर किसी कॉम्पोनेंट को अनमाउंट करने के बाद, ग्लोबल इवेंट लिसनर को हटाना भूल जाते हैं. अपने एजेंट को यह टास्क दिया जा सकता है कि वह यह पुष्टि करे कि व्यू के बीच नेविगेट करते समय, मेमोरी सही तरीके से खाली की गई है या नहीं.
प्रॉम्प्ट का उदाहरण:
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 को कॉल करने के लिए, खास कोड उपलब्ध कराता है.
यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट में, अलग किए गए डीओएम नोड की पहचान करना
अगर मॉडल, ड्रॉपडाउन, और यूज़र इंटरफ़ेस (यूआई) के जटिल कॉम्पोनेंट को डीओएम से हटाने के बाद, उनके रेफ़रंस JavaScript वैरिएबल में रखे जाते हैं, तो अक्सर अलग किए गए डीओएम नोड पीछे छूट जाते हैं.
प्रॉम्प्ट का उदाहरण:
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 पर सेट करने के लिए, कोड में बदलाव करने से पहले आपकी अनुमति मांगता है.
लगातार इंटरैक्शन में, अनबाउंड कैश ढूंढना
अगर इनफ़ाइनाइट स्क्रोलिंग या लगातार डेटा फ़ेच करने जैसी सुविधाओं के लिए इस्तेमाल की जाने वाली ऐरे या मैप, बिना किसी सीमा के बढ़ते हैं, तो मेमोरी लीक हो सकती है.
प्रॉम्प्ट का उदाहरण:
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 मेश को किसी ऐरे में पुश करता है. हालांकि, पिछली मेश को गार्बेज कलेक्शन में शामिल नहीं करता. इसलिए, यह ऑब्जेक्ट के दोबारा इस्तेमाल के लिए ऑप्टिमाइज़ेशन का सुझाव देता है.