แก้ไขปัญหา Memory Leaks ด้วย Chrome DevTools MCP 1.7
เลิกส่งไฟล์ heap-snapshot ขนาดมหึมาให้กับ AI assistant ของคุณเสียที เพราะไฟล์เหล่านั้นจะทำให้ context window เต็มและทำให้ AI คาดเดาผิดพลาด
Chrome DevTools MCP 1.7 ช่วยให้ AI agent สามารถ debug หน่วยความจำได้โดยไม่ต้องไล่ดูข้อมูลดิบ (raw data) เครื่องมือใหม่นี้จะช่วยระบุตำแหน่งของ leak ได้โดยตรง
ฟีเจอร์ใหม่ในเวอร์ชัน 1.7
- เครื่องมือ Object-details แสดง metadata ที่แม่นยำ
- Summaries แสดงรายการ native contexts และขนาดของแต่ละรายการ
- Filters ช่วยแยกเฉพาะ object ที่เลือก
- Agent ได้รับการอัปเกรดตรรกะการตรวจจับ leak (leak-detection logic)
- Diagnostic workers ทำความสะอาดข้อมูลได้น่าเชื่อถือยิ่งขึ้น
โปรโตคอลแบบ Three-snapshot
- บันทึก baseline snapshot
- ทำการกระทำที่สงสัยว่าทำให้เกิดปัญหา 10 ครั้ง จากนั้นบันทึก target snapshot
- ทำการกระทำย้อนกลับ (reverse the action) และบันทึก snapshot สุดท้าย
จะยืนยันได้ว่าเกิด leak ก็ต่อเมื่อหน่วยความจำยังคงอยู่ในระดับสูงใน snapshot สุดท้ายเท่านั้น
ขั้นตอนการทำงาน (Workflow)
- เปรียบเทียบ summaries เพื่อดูการเพิ่มขึ้นของข้อมูล
- ระบุ class ที่มีการสะสมหน่วยความจำมากที่สุด
- ระบุเจ้าของ (page, frame หรือ context)
- เจาะลึกไปยัง object instances เฉพาะเจาะจงและเส้นทางการถือครอง (retaining paths) ของมัน
- แก้ไขจุดเชื่อมต่อแรกในสายโซ่ (chain) ที่ชี้กลับมายังโค้ดของคุณ
ข้อควรระวังที่พบบ่อย
- ห้ามเปลี่ยน build หรือจำนวนรอบการวนลูป (loop count) ระหว่างการทำ snapshot
- อย่ามองว่า string ขนาดใหญ่ทุกตัวคือ leak
- ปิดแต่ละ snapshot เมื่อใช้งานเสร็จแล้ว
- ห้ามข้ามขั้นตอนการทำ reverse-action โดยเด็ดขาด
วิธีการนี้สามารถใช้งานได้กับ Claude Code, Cursor, Copilot หรือ AI agent ใดๆ ที่รองรับ MCP ในการจัดการกับปัญหาหน่วยความจำของ browser หรือ Node.js
แหล่งที่มา: https://github.com/ChromeDevTools/chrome-devtools-mcp/releases/tag/chrome-devtools-mcp-v1.7.0
ชุมชนเพื่อการเรียนรู้ (ไม่บังคับ): https://t.me/GyaanSetuAi