เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ช่วยให้ Agent การเขียนโค้ดวิเคราะห์และแก้ไขข้อบกพร่องของหน่วยความจำฝั่งไคลเอ็นต์ (รวมถึง JavaScript และ WebAssembly) ในแอปพลิเคชันได้ การทำให้การรวบรวมและการวิเคราะห์สแนปชอตฮีปเป็นแบบอัตโนมัติจะช่วยให้เอเจนต์ ระบุออบเจ็กต์ที่ไม่ได้รวบรวมขยะอย่างถูกต้องและแนะนำ การปรับโครงสร้างโค้ดที่กำหนดเป้าหมายได้
ในเวิร์กโฟลว์แบบ Agent การเขียนโค้ด Agent จะถ่ายภาพรวมหลายภาพในสถานะแอปพลิเคชันต่างๆ และใช้เครื่องมือวิเคราะห์เฉพาะทาง
รูปแบบการรั่วไหลของหน่วยความจำที่พบบ่อย
การวิเคราะห์หน่วยความจำมุ่งเน้นที่การหารูปแบบการรั่วไหลที่พบบ่อย ซึ่งรวมถึง
- Event Listener ที่ยังไม่ได้ล้าง: Event Listener ที่แนบกับออบเจ็กต์ส่วนกลาง
(เช่น
windowหรือdocument) ซึ่งป้องกันระบบจัดการหน่วยความจำที่ไม่ใช้แล้ว - โหนด DOM ที่ถูกปลดออก: โหนดที่นำออกจากแผนผังเอกสารแต่ยังคง อ้างอิงโดยตัวแปร JavaScript
- ตัวแปรร่วมโดยไม่ตั้งใจ: ตัวแปรที่ประกาศโดยไม่มี การกำหนดขอบเขตที่เหมาะสมซึ่งจะอยู่ในหน่วยความจำตลอดไป
- Closure: Closure ที่เก็บการอ้างอิงไปยังออบเจ็กต์ขนาดใหญ่โดยไม่ตั้งใจ ไว้ในขอบเขตของตัวเอง
- โครงสร้างข้อมูลแบบไม่จำกัด: โครงสร้างข้อมูลที่ใช้สำหรับการแคชซึ่งจะเพิ่มขึ้น โดยไม่มีขีดจำกัด
ข้อควรพิจารณาสำหรับการวิเคราะห์หน่วยความจำ
เมื่อใช้การวิเคราะห์หน่วยความจำ โปรดคำนึงถึงสิ่งต่อไปนี้
ไม่อ่านสแนปชอตดิบโดยตรง: อย่าให้ Agent อ่านไฟล์
.heapsnapshotดิบโดยตรง มีขนาดใหญ่เกินไปและเกินขีดจำกัดบริบท ทักษะการแก้ไขข้อบกพร่องของหน่วยความจำรั่วไหลจะสั่งให้ Agent หลีกเลี่ยงการอ่านไฟล์เหล่านี้อย่างชัดเจนวิธีการสแนปชอต 3 รายการ: โดยทั่วไปเอเจนต์ของคุณต้องจับภาพสแนปชอต 3 รายการเพื่อค้นหารอยรั่วได้อย่างน่าเชื่อถือ ได้แก่ ค่าพื้นฐานก่อนดำเนินการ เป้าหมายหลังดำเนินการ และสแนปชอตสุดท้ายหลังจากเปลี่ยนกลับการดำเนินการ โปรดทราบว่าการดำเนินการบางอย่าง เช่น การดำเนินการที่ทริกเกอร์โดยตัวจับเวลา (
setTimeout) หรือ ภาพเคลื่อนไหว (requestAnimationFrame) จะเกิดขึ้นโดยไม่ต้องมีการโต้ตอบจากผู้ใช้ และ อาจไม่จำเป็นต้องมีขั้นตอนการย้อนกลับโปรดทราบว่าการดำเนินการบางอย่าง เช่น การดำเนินการที่ทริกเกอร์โดยตัวจับเวลา (
setTimeout) หรือ ภาพเคลื่อนไหว (requestAnimationFrame) จะเกิดขึ้นโดยที่ผู้ใช้ไม่ต้องโต้ตอบ และ อาจยังคงเพิ่มการใช้หน่วยความจำตรวจสอบก่อนแก้ไข: ตรวจสอบสิ่งที่เอเจนต์พบเสมอเพื่อให้แน่ใจว่าการดำเนินการที่แนะนำ นั้นเกี่ยวข้องและถูกต้องสำหรับตรรกะของแอปพลิเคชัน เช่น ยืนยันว่าโหนดที่แยกออกมาเป็นส่วนหนึ่งของแคชที่ตั้งใจหรือไม่ ก่อนสั่งให้ Agent ล้างข้อมูลอ้างอิง
กรณีการใช้งานสำหรับการวิเคราะห์หน่วยความจำรั่วไหล
สั่งให้เอเจนต์สร้างโปรไฟล์หน่วยความจำระหว่างการดำเนินการซ้ำๆ รวมถึงตัวจับเวลาและการโต้ตอบของผู้ใช้ แทนที่จะถ่ายสแนปชอตและเปรียบเทียบด้วยตนเอง ผสานรวมการวิเคราะห์หน่วยความจำเข้ากับกระบวนการแก้ไขข้อบกพร่องด้วยเวิร์กโฟลว์ต่อไปนี้
หมายเหตุ: ขั้นตอนการดำเนินการของเอเจนต์เป็นตัวอย่างของลักษณะการทำงานที่อาจเกิดขึ้น Agent ของคุณ อาจทำงานแตกต่างออกไป
ตรวจหา Listener เหตุการณ์ที่ยังไม่ได้ล้างในระหว่างการนำทาง
แอปพลิเคชันหน้าเว็บเดียว (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 Listener ที่แนบกับออบเจ็กต์ 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 โต้ตอบกับโมดอลการตั้งค่าขณะ
รวบรวมสแนปชอตพื้นฐาน เป้าหมาย และสแนปชอตสุดท้ายที่จำเป็น การวิเคราะห์
แสดงให้เห็นออบเจ็กต์ที่เพิ่มขึ้นหลายรายการซึ่งมีป้ายกำกับเป็น 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.
ตัวอย่างการดำเนินการของ Agent: Agent จะวิเคราะห์สถานะหน่วยความจำก่อนและหลังการเลื่อน โดยจะระบุ Closure ที่จับภาพอาร์เรย์ขนาดใหญ่โดยไม่ตั้งใจ ซึ่งจะขยายขนาดได้ไม่จำกัด Agent แนะนำให้ใช้ขีดจำกัดการแคช หรือใช้ WeakMap สำหรับข้อมูลที่เชื่อมโยงกับวงจรของออบเจ็กต์เพื่อให้ระบบจัดการหน่วยความจำที่ไม่ใช้แล้วทำงานได้อย่างถูกต้อง
แก้ไขข้อบกพร่องหน่วยความจำรั่วไหลในกระบวนการเบื้องหลัง
ตัวจับเวลาภาพเคลื่อนไหวและพื้นหลังอาจทำให้หน่วยความจำรั่วไหลได้โดยที่ผู้ใช้ไม่ได้โต้ตอบอย่างชัดเจน คุณสามารถสั่งให้ตัวแทนตรวจสอบการเพิ่มขึ้นของหน่วยความจำเมื่อเวลาผ่านไปเพื่อ ค้นหาหน่วยความจำรั่วสำหรับกระบวนการเหล่านี้
ตัวอย่างพรอมต์:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
ตัวอย่างการดำเนินการของเอเจนต์: เอเจนต์จะสำรวจแอปพลิเคชัน Canvas และถ่ายภาพรวมเป็นระยะๆ โดยอัตโนมัติเพื่อตรวจสอบการใช้งานหน่วยความจำเมื่อเวลาผ่านไป โดยจะ วิเคราะห์ฮีปและระบุว่าลูปการแสดงผลจะพุชเมช WebGL ใหม่ ไปยังอาร์เรย์ในทุกเฟรมโดยไม่เก็บขยะของเฟรมก่อนหน้า ซึ่งเป็นการแนะนำการเพิ่มประสิทธิภาพสำหรับการนำออบเจ็กต์กลับมาใช้ซ้ำ