एजेंट के लिए Chrome DevTools की मदद से, कोडिंग एजेंट आपके ऐप्लिकेशन में क्लाइंट-साइड की मेमोरी लीक (इसमें JavaScript और WebAssembly शामिल हैं) का विश्लेषण कर सकता है और उन्हें ठीक कर सकता है. हीप स्नैपशॉट के कलेक्शन और विश्लेषण को अपने-आप होने की सुविधा चालू करके, आपका एजेंट उन ऑब्जेक्ट का पता लगा सकता है जिन्हें सही तरीके से गार्बेज इकट्ठा नहीं किया जा रहा है. साथ ही, वह कोड को फिर से व्यवस्थित करने का सुझाव दे सकता है.
एजेंटिक वर्कफ़्लो में, आपका कोडिंग एजेंट अलग-अलग ऐप्लिकेशन की स्थितियों के स्नैपशॉट लेता है. साथ ही, वह खास विश्लेषण टूल का इस्तेमाल करता है.
मेमोरी लीक के सामान्य पैटर्न
मेमोरी विश्लेषण में, लीक होने के सामान्य पैटर्न का पता लगाने पर फ़ोकस किया जाता है. इनमें ये शामिल हैं:
- अनक्लीयर किए गए इवेंट लिसनर: ग्लोबल ऑब्जेक्ट (जैसे,
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 को कॉल करने के लिए, खास कोड उपलब्ध कराता है.
यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट में डिटैच किए गए डीओएम नोड की पहचान करना
अगर DOM से हटाए जाने के बाद भी, JavaScript वैरिएबल में मोडल, ड्रॉपडाउन, और जटिल यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के रेफ़रंस रखे जाते हैं, तो वे अक्सर अलग किए गए 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 मेश को एक ऐरे में पुश करता है. हालांकि, यह पिछले मेश को इकट्ठा नहीं करता है. इसलिए, यह ऑब्जेक्ट को फिर से इस्तेमाल करने के लिए ऑप्टिमाइज़ेशन का सुझाव देता है.