Chrome DevTools สำหรับ Agent ช่วยให้ Agent ที่เขียนโค้ดวิเคราะห์และแก้ไขหน่วยความจำรั่วไหลฝั่งไคลเอ็นต์ (รวมถึง JavaScript และ WebAssembly) ในแอปพลิเคชันได้ การทำให้การรวบรวมและการวิเคราะห์สแนปชอตฮีปเป็นไปโดยอัตโนมัติจะช่วยให้ Agent ระบุออบเจ็กต์ที่ไม่ได้เก็บขยะอย่างเหมาะสมและแนะนำการเปลี่ยนโครงสร้างภายในโค้ดที่กำหนดเป้าหมายได้
ในเวิร์กโฟลว์แบบ Agent Agent ที่เขียนโค้ดจะใช้ Snapshot หลายรายการในสถานะแอปพลิเคชันต่างๆ และใช้เครื่องมือวิเคราะห์เฉพาะทาง
เปิดใช้เครื่องมือแก้ไขข้อบกพร่องหน่วยความจำ
โดยค่าเริ่มต้น Chrome DevTools สำหรับ Agent จะแสดงเฉพาะเครื่องมือ take_heapsnapshot เครื่องมือที่วิเคราะห์สแนปชอตฮีป (เช่น compare_heapsnapshots, get_heapsnapshot_summary และ get_heapsnapshot_retaining_paths) จะพร้อมใช้งานก็ต่อเมื่อคุณเริ่มเซิร์ฟเวอร์ด้วยแฟล็ก --memoryDebugging หากไม่มีแฟล็กนี้ Agent จะจับภาพ Snapshot ได้ แต่จะวิเคราะห์ Snapshot ไม่ได้
หากต้องการเปิดใช้เครื่องมือแก้ไขข้อบกพร่องหน่วยความจำ ให้เพิ่ม --memoryDebugging ลงในอาร์กิวเมนต์ของเซิร์ฟเวอร์
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
ดูตัวเลือกเพิ่มเติมได้ที่ การกำหนดค่า
รูปแบบหน่วยความจำรั่วไหลที่พบบ่อย
การวิเคราะห์หน่วยความจำมุ่งเน้นไปที่การค้นหารูปแบบการรั่วไหลที่พบบ่อย ซึ่งรวมถึง
- Listener เหตุการณ์ที่ไม่ได้ล้าง: Listener เหตุการณ์ที่แนบกับออบเจ็กต์ส่วนกลาง (เช่น
windowหรือdocument) ซึ่งป้องกันระบบจัดการหน่วยความจำที่ไม่ใช้แล้ว - โหนด DOM ที่แยกออก: โหนดที่นำออกจากแผนผังเอกสาร แต่ตัวแปร JavaScript ยังคงอ้างอิงถึง
- ตัวแปรส่วนกลางโดยไม่ตั้งใจ: ตัวแปรที่ประกาศโดยไม่มีขอบเขตที่เหมาะสมซึ่งยังคงอยู่ในหน่วยความจำตลอดไป
- Closure: Closure ที่เก็บการอ้างอิงถึงออบเจ็กต์ขนาดใหญ่ไว้ในขอบเขตของตัวเองโดยไม่ตั้งใจ
- โครงสร้างข้อมูลที่ไม่มีขอบเขต: โครงสร้างข้อมูลที่ใช้สำหรับการแคชซึ่งขยายขนาดได้ไม่จำกัด
สิ่งที่ควรพิจารณาสำหรับการวิเคราะห์หน่วยความจำ
เมื่อใช้การวิเคราะห์หน่วยความจำ ให้คำนึงถึงสิ่งต่อไปนี้
อย่าอ่าน Snapshot ดิบโดยตรง: อย่าให้ Agent อ่านไฟล์
.heapsnapshotดิบโดยตรง เนื่องจากไฟล์มีขนาดใหญ่เกินไปและเกินขีดจำกัดบริบท ทักษะการแก้ไขข้อบกพร่องหน่วยความจำรั่วไหลจะสั่งให้ Agent หลีกเลี่ยงการอ่านไฟล์เหล่านี้อย่างชัดเจนวิธีการ 3 Snapshot: โดยทั่วไป Agent ต้องจับภาพ Snapshot 3 รายการ ได้แก่ Snapshot พื้นฐานก่อนดำเนินการ Snapshot เป้าหมายหลังดำเนินการ และ Snapshot สุดท้ายหลังจากย้อนกลับการดำเนินการ เพื่อค้นหาการรั่วไหลได้อย่างน่าเชื่อถือ โปรดทราบว่าการดำเนินการบางอย่าง เช่น การดำเนินการที่ทริกเกอร์โดยตัวจับเวลา (
setTimeout) หรือภาพเคลื่อนไหว (requestAnimationFrame) จะเกิดขึ้นโดยไม่มีการโต้ตอบจากผู้ใช้และอาจไม่จำเป็นต้องมีขั้นตอนการย้อนกลับโปรดทราบว่าการดำเนินการบางอย่าง เช่น การดำเนินการที่ทริกเกอร์โดยตัวจับเวลา (
setTimeout) หรือภาพเคลื่อนไหว (requestAnimationFrame) จะเกิดขึ้นโดยไม่มีการโต้ตอบจากผู้ใช้และอาจยังคงเพิ่มการใช้งานหน่วยความจำตรวจสอบก่อนแก้ไข: ตรวจสอบผลการค้นหาของ Agent เสมอเพื่อให้แน่ใจว่าการดำเนินการที่เสนอสามารถใช้ได้และถูกต้องตามตรรกะของแอปพลิเคชัน เช่น ยืนยันว่าโหนดที่แยกออกเป็นส่วนหนึ่งของแคชที่ตั้งใจไว้หรือไม่ก่อนที่จะสั่งให้ Agent ทำให้การอ้างอิงเป็น Null
กรณีการใช้งานสำหรับการวิเคราะห์หน่วยความจำรั่วไหล
สั่งให้ Agent ทำโปรไฟล์หน่วยความจำระหว่างการดำเนินการซ้ำๆ รวมถึงตัวจับเวลาและการโต้ตอบจากผู้ใช้ แทนที่จะจับภาพ Snapshot และเปรียบเทียบด้วยตนเอง ผสานรวมการวิเคราะห์หน่วยความจำเข้ากับกระบวนการแก้ไขข้อบกพร่องด้วยเวิร์กโฟลว์ต่อไปนี้
หมายเหตุ: ขั้นตอนการดำเนินการของ Agent เป็นตัวอย่างของลักษณะการทำงานที่อาจเกิดขึ้น Agent ของคุณอาจทำงานแตกต่างออกไป
ตรวจหา Listener เหตุการณ์ที่ไม่ได้ล้างระหว่างการนำทาง
แอปพลิเคชันหน้าเดียว (SPA) มักจะรั่วไหลหน่วยความจำเมื่อนักพัฒนาแอปเผลอลืมนำ Listener เหตุการณ์ส่วนกลางออกหลังจากยกเลิกการติดตั้งคอมโพเนนต์ คุณสามารถมอบหมายให้ Agent ตรวจสอบว่าหน่วยความจำได้รับการปล่อยอย่างถูกต้องเมื่อนำทางระหว่างมุมมอง
ตัวอย่างพรอมต์
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.
ตัวอย่างการดำเนินการของ Agent: Agent จะใช้ สแนปชอตฮีป พื้นฐานในหน้าแรก นำทางไปยังแดชบอร์ด และนำทางกลับไปที่หน้าแรกเพื่อใช้ สแนปชอตฮีป สุดท้าย จากนั้นจะใช้เครื่องมือวิเคราะห์ภายในเพื่อประเมิน Snapshot ตรวจพบว่าตัวฟัง scroll ที่แนบกับออบเจ็กต์ window ไม่เคยถูกล้าง และระบุโค้ดเฉพาะเพื่อเรียก removeEventListener ในฟังก์ชันการล้างข้อมูลของคอมโพเนนต์
ระบุโหนด DOM ที่แยกออกในคอมโพเนนต์ UI
โมดัล เมนูแบบเลื่อนลง และคอมโพเนนต์ UI ที่ซับซ้อนมักจะทิ้งโหนด 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.
ตัวอย่างการดำเนินการของ Agent: Agent จะโต้ตอบกับโมดัลการตั้งค่าขณะรวบรวม Snapshot พื้นฐาน เป้าหมาย และ Snapshot สุดท้ายที่จำเป็น การวิเคราะห์เผยให้เห็นออบเจ็กต์หลายรายการที่เพิ่มขึ้นซึ่งมีป้ายกำกับเป็น Detached HTMLDivElement Agent จะแจ้งให้คุณทราบผลการค้นหาและขอการยืนยันจากคุณก่อนที่จะเปลี่ยนโค้ดเพื่อตั้งค่าตัวแปรที่เก็บการอ้างอิง 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.
ตัวอย่างการดำเนินการของ Agent: Agent จะวิเคราะห์สถานะหน่วยความจำก่อนและหลังการเลื่อน โดยจะระบุ Closure ที่จับอาร์เรย์ขนาดใหญ่โดยไม่ตั้งใจซึ่งขยายขนาดได้ไม่จำกัด Agent จะแนะนำให้ใช้ขีดจำกัดการแคชหรือใช้ WeakMap สำหรับข้อมูลที่เชื่อมโยงกับวงจรชีวิตของออบเจ็กต์เพื่อให้มีการเก็บขยะอย่างเหมาะสม
แก้ไขข้อบกพร่องหน่วยความจำรั่วไหลในกระบวนการเบื้องหลัง
ตัวจับเวลาภาพเคลื่อนไหวและตัวจับเวลาเบื้องหลังอาจทำให้หน่วยความจำรั่วไหลโดยไม่มีการโต้ตอบจากผู้ใช้โดยชัดแจ้ง คุณสามารถสั่งให้ Agent ตรวจสอบการเติบโตของหน่วยความจำเมื่อเวลาผ่านไปเพื่อค้นหาหน่วยความจำรั่วไหลสำหรับกระบวนการเหล่านี้
ตัวอย่างพรอมต์
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
ตัวอย่างการดำเนินการของ Agent: Agent จะสำรวจแอปพลิเคชัน Canvas และใช้สแนปชอตเป็นระยะโดยอัตโนมัติเพื่อตรวจสอบการใช้งานหน่วยความจำเมื่อเวลาผ่านไป โดยจะวิเคราะห์ Heap และระบุว่าลูปการแสดงผลจะส่งเมช WebGL ใหม่ไปยังอาร์เรย์ในทุกเฟรมโดยไม่เก็บขยะเมชก่อนหน้า ซึ่งเป็นการแนะนำการเพิ่มประสิทธิภาพสำหรับการนำออบเจ็กต์กลับมาใช้ซ้ำ