เวิร์กช็อป›สร้างแอป & โค้ด
6 · สร้างแอป & โค้ด
ดีบักด้วย Claude Code
หาและแก้บั๊กอย่างเป็นระบบ
ความคืบหน้าเวิร์กช็อป
รู้ใน 30 วิ
เจอ error แล้วงง? วาง error เต็ม ๆ ให้ claude มันจะ ไล่หาสาเหตุที่แท้จริง ไม่ใช่แค่ปิดอาการ แล้วแก้ให้พร้อมรันเทสยืนยัน
วาง error ทั้งก้อนหา root cause ก่อนแก้รันเทส ยืนยันว่าหาย
ดู Claude Code ไล่บั๊ก
วาง error แล้วดูมันสืบจนเจอต้นตอ
ดู Claude Code ทำงาน
คุณรันแล้วเจอ error นี้ TypeError: Cannot read properties of undefined (reading 'map') ที่ App.jsx บรรทัด 24 ช่วยหาสาเหตุและแก้ให้หน่อย
- ›อ่าน App.jsx รอบบรรทัด 24 เพื่อดูว่าตัวแปรไหน undefined
- ›ตามไปดูจุดที่ดึงข้อมูล พบว่า state เริ่มเป็น
undefinedก่อน fetch เสร็จ - ›สรุปต้นตอ คือ render ก่อนข้อมูลมา ไม่ใช่ที่บรรทัด 24 เอง
- ›แก้ให้ตั้งค่าเริ่มเป็น array ว่าง และเช็คก่อน map รันใหม่ผ่าน
- ✓เสร็จ error หาย พร้อมอธิบายว่าทำไมถึงพังและแก้ตรงไหน
อย่าแค่ถามว่า "แก้ยังไง" ให้ วาง error เต็ม ๆ พร้อมขั้นตอนที่ทำให้เกิด ยิ่งบริบทครบ Claude Code ยิ่งหาต้นตอได้ตรง
ดีบักอย่างเป็นระบบ 3 ขั้น
ไล่แบบนี้แล้วบั๊กไม่กลับมาอีก
1
ทำให้เกิดซ้ำได้
บอก Claude Code ว่ากดอะไรถึงพัง วาง error และ stack trace ทั้งก้อนไม่ตัดทิ้ง
2
หาต้นตอจริง
ให้มันอ่านไฟล์ที่เกี่ยวและไล่ย้อนไปจุดที่ผิดจริง บั๊กมักไม่ได้อยู่บรรทัดที่ error ฟ้อง
3
แก้แล้วยืนยัน
ให้แก้ที่ต้นเหตุ แล้วรันเทสหรือรันโปรแกรมซ้ำเพื่อพิสูจน์ว่าอาการหายจริง
ลองเลยจับมือทำ
- เปิด
claudeในโฟลเดอร์โปรเจกต์ที่มีบั๊ก - ก๊อปข้อความ error จากเทอร์มินัลหรือ console ทั้งหมด แล้ววาง Prompt นี้พร้อมกันพิมพ์ Prompt นี้
เจอ error นี้ตอน [กดปุ่มส่งฟอร์ม / โหลดหน้า]: [วาง error และ stack trace ทั้งหมดที่นี่] ช่วยหาสาเหตุที่แท้จริงก่อน อธิบายว่าทำไมถึงพัง แล้วค่อยแก้ อย่าแค่ปิดอาการ - ให้ Claude Code อ่านไฟล์และอธิบายต้นตอก่อน ถ้าเข้าใจแล้วค่อยพิมพ์
โอเค แก้เลย - พิมพ์
รันเทส (หรือรันโปรแกรม) ให้ดูว่าหายจริงไหมเพื่อยืนยันผล - ถ้าอยากกันพลาดในอนาคต พิมพ์
เขียนเทสครอบเคสนี้ไว้ด้วย
ลองใช้ Prompt นี้
โค้ดนี้ทำงานไม่ตรงที่คาด คาดว่าจะได้ [ผลที่ควรเป็น] แต่กลับได้ [ผลที่เกิดจริง]
ไฟล์ที่เกี่ยวข้องคือ [ชื่อไฟล์]
ช่วยไล่หาสาเหตุทีละขั้น อธิบายให้เข้าใจ แล้วเสนอวิธีแก้ที่ต้นเหตุ
สรุปเวิร์กช็อป
- วาง error และ stack trace ทั้งก้อน อย่าตัด เพราะบริบทยิ่งครบยิ่งหาต้นตอได้ตรง
- ให้ Claude Code หา root cause และอธิบายก่อน แล้วค่อยให้แก้ ไม่ใช่แค่ปิดอาการ
- ปิดงานด้วยการรันเทสหรือรันโปรแกรมซ้ำ เพื่อพิสูจน์ว่าบั๊กหายจริง
แบบทดสอบท้ายเวิร์กช็อป
ลองตอบดู แล้วระบบจะเฉลยให้ทันที
ข้อ 1.เวลาเจอ error ควรส่งอะไรให้ Claude Code เพื่อให้หาต้นตอได้แม่นที่สุด?
เฉลย: ยิ่งให้บริบทครบ ทั้ง error เต็ม ๆ และวิธีทำให้เกิดซ้ำ Claude Code ยิ่งไล่ไปหาต้นตอได้ตรง
ข้อ 2.ทำไมไม่ควรหยุดแค่ Claude Code แก้โค้ดให้?
เฉลย: การแก้ที่ดีต้องพิสูจน์ได้ ให้รันเทสหรือรันโปรแกรมซ้ำเพื่อยืนยันว่าอาการหายจริง
ข้อ 3.บั๊กมักอยู่ตรงไหนเมื่อเทียบกับบรรทัดที่ error ฟ้อง?
เฉลย: error มักฟ้องที่ปลายทางของปัญหา ต้องไล่ย้อนกลับไปจุดที่ผิดจริงถึงจะแก้ได้ถาวร