כלי הפיתוח ל-Chrome לסוכני AI מאפשרים לסוכן התכנות לנתח ולתקן דליפות זיכרון בצד הלקוח (כולל JavaScript ו-WebAssembly) באפליקציה. באמצעות אוטומציה של איסוף וניתוח של תמונות מצב של הערימה, הסוכן יכול לאתר אובייקטים שלא מתבצע לגביהם איסוף אשפה כמו שצריך, ולהציע שינוי ממוקד בקוד.
בתהליך עבודה Agentic Workflows, סוכן התכנות מצלם כמה תמונות מצב במצבים שונים של האפליקציה ומשתמש בכלים מיוחדים לניתוח.
הפעלת כלים לניפוי באגים בזיכרון
כברירת מחדל, כלי הפיתוח ל-Chrome לסוכני AI חושפים רק את הכלי take_heapsnapshot. הכלים שמנתחים תמונות מצב של ערימה (heap snapshot) (לדוגמה, compare_heapsnapshots, get_heapsnapshot_summary ו-get_heapsnapshot_retaining_paths) זמינים רק כשמפעילים את השרת עם הדגל --memoryDebugging. בלי הדגל הזה, הסוכן יכול לצלם תמונות מצב אבל לא לנתח אותן.
כדי להפעיל את כלי ניפוי הבאגים בזיכרון, מוסיפים את --memoryDebugging לארגומנטים של השרת:
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
לאפשרויות נוספות, ראו הגדרה.
דפוסים נפוצים של דליפות זיכרון
ניתוח הזיכרון מתמקד באיתור דפוסים נפוצים של זליגת זיכרון, כולל:
- רכיבי event listener שלא נוקו: רכיבי event listener שמצורפים לאובייקטים גלובליים (כמו
windowאוdocument) ומונעים את מנגנון איסוף הזבל. - צומתי DOM מנותקים: צמתים שהוסרו מעץ המסמך אבל עדיין יש אליהם הפניה ממשתנה JavaScript.
- משתנים גלובליים לא מכוונים: משתנים שהוגדרו ללא הגדרת היקף נכונה ונשארים בזיכרון לנצח.
- סגירות: סגירות ששומרות בטעות הפניות לאובייקטים גדולים בהיקף שלהן.
- מבני נתונים לא מוגבלים: מבני נתונים שמשמשים לשמירה במטמון וגדלים ללא הגבלה.
שיקולים לגבי ניתוח הזיכרון
כשמשתמשים בניתוח הזיכרון, חשוב לזכור את הנקודות הבאות:
אל תקרא תמונות מצב גולמיות ישירות: אל תאפשר לסוכן לקרוא קובצי
.heapsnapshotגולמיים ישירות. הם גדולים מדי וחורגים ממגבלות ההקשר. מיומנות ניפוי הבאגים של דליפת הזיכרון מורה לסוכנים במפורש להימנע מקריאת הקבצים האלה.שיטת שלוש תמונות המצב: כדי למצוא דליפות בצורה מהימנה, הסוכן בדרך כלל צריך לצלם שלוש תמונות מצב: תמונת מצב בסיסית לפני הפעולה, תמונת מצב של היעד אחרי הפעולה ותמונת מצב סופית אחרי ביטול הפעולה. חשוב לזכור שפעולות מסוימות, כמו פעולות שמופעלות על ידי טיימרים (
setTimeout) או אנימציות (requestAnimationFrame), מתרחשות בלי אינטראקציה של המשתמש, ויכול להיות שלא נדרש שלב ביטול.חשוב לזכור שחלק מהפעולות, כמו אלה שמופעלות על ידי טיימרים (
setTimeout) או אנימציות (requestAnimationFrame), מתרחשות ללא אינטראקציה של המשתמש, ועדיין עשויות להגדיל את השימוש בזיכרון.אימות לפני תיקון: תמיד צריך לבדוק את הממצאים של הנציג כדי לוודא שהפעולות שהוא מציע רלוונטיות ונכונות ללוגיקה של האפליקציה. לדוגמה, לפני שמנחים את הסוכן לבטל את ההפניות, צריך לבדוק אם צומת מנותק הוא חלק ממטמון מכוון.
תרחישים לדוגמה לניתוח דליפת זיכרון
הורו לסוכן ליצור פרופיל של הזיכרון במהלך פעולות שחוזרות על עצמן, כולל טיימרים ואינטראקציות של משתמשים, במקום ליצור תמונות מצב באופן ידני ולהשוות ביניהן. אפשר לשלב ניתוח זיכרון בתהליך ניפוי הבאגים באמצעות תהליכי העבודה האלה.
הערה: השלבים של סוכן לביצוע פעולות הם דוגמאות להתנהגות פוטנציאלית. הסוכן שלכם עשוי לפעול אחרת.
זיהוי רכיבי event listener שלא נוקו במהלך הניווט
באפליקציות דף יחיד (SPA) יש לעיתים קרובות דליפות זיכרון, כי המפתחים שוכחים להסיר רכיבי event listener גלובליים אחרי שהרכיב מוסר. אתם יכולים לבקש מהנציג לוודא שהזיכרון מתפנה כמו שצריך כשעוברים בין תצוגות.
פרומפט לדוגמה:
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.
דוגמה להרצת הסוכן: הסוכן יוצר תמונת מצב של ערימה (heap snapshot) בסיסית בדף הבית, עובר למרכז הבקרה וחוזר לדף הבית כדי ליצור תמונת מצב סופית. לאחר מכן, הוא משתמש בכלים פנימיים לניתוח תמונות מצב, מזהה שמאזין scroll שמצורף לאובייקט window אף פעם לא נוקה, ומספק את הקוד הספציפי לקריאה ל-removeEventListener בפונקציית הניקוי של הרכיב.
זיהוי צומתי DOM מנותקים ברכיבי ממשק משתמש
מודלים, תפריטים נפתחים ורכיבים מורכבים של ממשק המשתמש משאירים לעיתים קרובות צומתי 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.
דוגמה לביצוע של סוכן: הסוכן שלכם מקיים אינטראקציה עם חלון ההגדרות כשמתבצע איסוף של תמונות המצב הנדרשות של בסיס ההשוואה, היעד והסיום. הניתוח חושף כמה אובייקטים שגדלים, שמסומנים כ-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.
דוגמה להרצת סוכן: הסוכן בודק את אפליקציית ה-Canvas ומצלם באופן אוטומטי תמונות מצב תקופתיות כדי לעקוב אחרי השימוש בזיכרון לאורך זמן. הוא מנתח את ה-heap ומזהה שלולאת הרינדור דוחפת רשתות WebGL חדשות למערך בכל פריים בלי לאסוף את הזבל של הקודמות, ומציע אופטימיזציות לשימוש חוזר באובייקטים.