MCP Debug Tools - เครื่องมือช่วย AI สำหรับดีบัก

สะพานเชื่อมดีบัก AI-VSCode - ให้ AI ตรวจสอบบั๊กโดยอิงจากข้อมูลจริง

'MCP Debug Tools' เป็นโปรเจกต์โอเพนซอร์สที่เชื่อม Microsoft Debug Adapter Protocol (DAP) เข้ากับ Anthropic Model Context Protocol (MCP) เครื่องมือนี้ทำให้ AI อย่าง Claude, Cursor และ Windsurf สามารถควบคุมความสามารถด้านการดีบักอันทรงพลังของ VSCode ได้โดยตรง

Before (วิธีเดิม)

นักพัฒนา: "ข้อมูลที่สรุปของคอมโพเนนต์ที่เห็นในเมนู A ไม่ตรงกับข้อมูลที่เห็นในเมนู B ต้องหาบั๊กให้เจอ"  
AI: "กำลังวิเคราะห์โค้ด...พบปัญหาในโครงสร้างโค้ด"  
นักพัฒนา: "อาการยังเหมือนเดิม"  
AI: "จะลองวิเคราะห์ให้ลึกขึ้น กำลังเปรียบเทียบชนิดข้อมูลและโครงสร้าง..."  
นักพัฒนา: "อาการยังไม่หาย"  
AI: "ต้องการล็อกเพิ่ม จะเพิ่มล็อกแล้วลองใหม่"  
นักพัฒนา: "อาการก็ยังไม่หายเหมือนเดิม"  
  
[ทำซ้ำ...]  

After (MCP Debug Tools)

นักพัฒนา: "ข้อมูลที่สรุปของคอมโพเนนต์ที่เห็นในเมนู A ไม่ตรงกับข้อมูลที่เห็นในเมนู B ช่วยเปรียบเทียบข้อมูลจากการดีบักเพื่อหาปัญหาที"  
AI: "ผมจะลองเปรียบเทียบตำแหน่งของคอมโพเนนต์ในเมนู A กับเมนู B"  
AI: "คอมโพเนนต์ในเมนู A ถูกเรนเดอร์จากฟังก์ชัน Y ในไฟล์ X ส่วนคอมโพเนนต์ในเมนู B ถูกเรนเดอร์จากฟังก์ชัน W ในไฟล์ Z"  
AI: "ผมตั้งเบรกพอยต์ไว้ที่ส่วนที่ดึงข้อมูลในฟังก์ชัน Y ของไฟล์ X แล้ว จะเริ่มดีบักเลย"  
  
[เริ่มเซสชันดีบัก โดย AI ใช้ความสามารถด้านการดีบักของ VSCode เพื่อรันโค้ด ตรวจสอบตัวแปร ดู stack trace ฯลฯ]  
  
AI: "ถึงเบรกพอยต์แล้ว เมื่อตรวจสอบตัวแปรพบว่าข้อมูลของเมนู A ใช้ผลลัพธ์จากการเรียก API โดยตรง แต่ข้อมูลของเมนู B ใช้ข้อมูลจากแคช จึงน่าจะเป็นสาเหตุให้ข้อมูลไม่ตรงกัน"  
AI: "แก้โค้ดเสร็จแล้ว จะเริ่มเซสชันดีบักอีกครั้ง"  
  
[เริ่มเซสชันดีบักใหม่ รันโค้ด ตรวจสอบตัวแปร]  
  
AI: "ยืนยันแล้วว่าข้อมูลตรงกัน ดูเหมือนปัญหาจะได้รับการแก้ไขแล้ว"  
นักพัฒนา: "แก้ได้แล้ว!"  

การติดตั้ง (3 ขั้นตอน)

# 1. ติดตั้ง VSCode Extension  
code --install-extension mcp-debug-tools  
  
# 2. ติดตั้งแพ็กเกจ npm (ทางเลือก)  
npm install -g @uhd_kr/mcp-debug-tools  
  
# 3. เชื่อมต่อกับเครื่องมือ AI  
# เพิ่ม MCP server ใน Claude, Cursor, Windsurf เป็นต้น  
{  
  "mcpServers": {  
    "release_dap-proxy": {  
      "command": "npx",  
      "args": [  
        "-y",  
        "@uhd_kr/mcp-debug-tools@latest"  
      ]  
    }  
  }  
}  

ฟีเจอร์หลัก

เครื่องมือดีบักทรงพลัง 29 รายการ

• การจัดการเบรกพอยต์: รองรับ conditional และ log point
• การควบคุมการทำงาน: Step In/Out/Over, Continue, Pause
• การตรวจสอบตัวแปร: ติดตามค่าแบบเรียลไทม์, ประเมิน expression
• การวิเคราะห์ call stack: แสดงภาพลำดับการเรียกฟังก์ชัน
• รองรับมัลติเธรด: ดีบัก Worker Threads, SharedArrayBuffer

รีซอร์สมอนิเตอร์แบบเรียลไทม์ 5 รายการ

• สถานะของเซสชันดีบักที่กำลังใช้งาน
• รายการเบรกพอยต์
• ข้อมูล call stack
• ขอบเขตของตัวแปร
• ข้อมูล exception และ stack trace

ลิงก์

• GitHub: github.com/uhd-kr/mcp-debug-tools
• npm: @uhd_kr/mcp-debug-tools
• VSCode: marketplace.visualstudio.com
• Demo: เดโมบน YouTube

คำจากผู้พัฒนา

ทุกวันผมใช้เวลามากมายไปกับการดีบักปัญหาในโค้ดที่ AI สร้างออกมา แล้วก็คิดขึ้นมาว่า
'การที่ AI ไม่สามารถแก้ปัญหาได้ด้วยตัวเอง ก็เหมือนมือใหม่ที่ยังดีบักไม่เป็น'
ดังนั้นผมจึงสร้างเครื่องมือที่ช่วยให้ AI ดีบักได้
สิ่งที่สำคัญที่สุดเมื่อให้คอนเท็กซ์กับ AI คือข้อมูลจริง
การดีบักช่วยให้เราสังเกตลำดับการทำงานและสถานะของโค้ดได้แบบเรียลไทม์ จึงช่วยให้ AI เข้าใจปัญหาได้อย่างแม่นยำและเสนอวิธีแก้ได้อย่างมีประสิทธิภาพ

ผมพยายามยึดหลักการพื้นฐานของการพัฒนาเอาไว้
หากแผนต่อไปของ 'MCP Debug Tools' คือการสร้างเครื่องมือที่ทำให้ AI แก้ปัญหาได้ด้วยตัวเองผ่านการดีบัก
ขั้นต่อไปก็คือการสร้างเครื่องมือที่ช่วยให้ AI เขียนโค้ดด้วยนิสัยและแนวปฏิบัติที่ถูกต้องตั้งแต่แรก
เป้าหมายสุดท้ายคือการนำทั้งหมดนี้มารวมกันเพื่อสร้างไปป์ไลน์การผลิตโค้ดที่ถูกต้อง

หวังว่าเครื่องมือนี้จะเป็นประโยชน์อย่างมากต่อเส้นทางการพัฒนา AI ของทุกคน
ในฐานะนักพัฒนาเดี่ยว ผมต้องการฟีดแบ็กหลากหลายอย่างมากจริง ๆ
ผมเขียนโพสต์นี้เพราะอยากได้รับความช่วยเหลือ ไม่ว่าจะเป็นรายงานบั๊ก ข้อเสนอฟีเจอร์ หรือรีวิวการใช้งาน

ขอบคุณครับ

ฟีดแบ็ก: [e-mail]