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.
اجرای عامل نمونه: عامل شما در صفحه اصلی یک نمای کلی پشته پایه می‌گیرد، به داشبورد پیمایش می‌کند، و برای گرفتن نمای کلی نهایی به صفحه اصلی برمی‌گردد. سپس از ابزارهای تحلیل داخلی برای ارزیابی عکس‌های آنی استفاده می‌کند، تشخیص می‌دهد که شنونده scroll متصل به شیء window هرگز پاک نشده است، و کد خاصی را برای فراخوانی removeEventListener در تابع پاک‌سازی مؤلفه شما ارائه می‌دهد.
شناسایی گره‌های DOM جداشده در مؤلفه‌های واسط کاربر
اگر ارجاع به مؤلفه‌های واسط کاربر پیچیده، منوهای کرکره‌ای، و مدال‌ها پس‌از برداشته شدن از 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 جدیدی را به آرایه اضافه می‌کند بدون اینکه مش‌های قبلی را پاک‌سازی کند، و بهینه‌سازی‌هایی برای استفاده مجدد از شیء پیشنهاد می‌کند.