Debug แอปที่ AI เขียน: อ่าน Error และสั่งแก้ให้ตรง

รู้ว่า error ซ่อนอยู่ที่ไหน อ่าน status code และ log ให้เป็น แล้วใช้กระบวนการ 5 ขั้นเพื่อหลุดจากการสั่งแก้วนไม่จบ

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

Debug คืออะไร ในโลก Vibe Coding

Debug คือกระบวนการหาว่าทำไมโปรแกรมทำงานไม่ตรงกับที่ตั้งใจ แล้วแก้ที่ต้นเหตุ ในงาน vibe coding บทบาทของคุณไม่ใช่คนแก้โค้ด แต่เป็น นักสืบที่เก็บหลักฐานส่งให้ AI ยิ่งหลักฐานตรง AI ยิ่งแก้ได้ในรอบเดียว

Error ซ่อนอยู่ที่ไหนบ้าง

1. หน้า Preview

หลายเครื่องมือแสดงกล่อง error บนหน้า preview เมื่อโค้ดพัง ข้อความนี้คือจุดเริ่มต้นที่ดีที่สุด คัดลอกทั้งหมด ไม่ใช่แค่บรรทัดแรก

2. Console ของเบราว์เซอร์

กด F12 หรือคลิกขวาเลือก Inspect แล้วเปิดแท็บ Console ข้อความสีแดงคือ error ที่เกิดฝั่งหน้าเว็บ มักบอกชื่อไฟล์และบรรทัดที่เกิดปัญหา

3. แท็บ Network

ในเครื่องมือเดียวกัน แท็บ Network แสดงทุกคำขอที่หน้าเว็บส่งไปเซิร์ฟเวอร์ กดปุ่มที่มีปัญหาแล้วดูคำขอที่เป็นสีแดง ตัวเลข status code บอกทิศทางได้ทันที:

• 400: ข้อมูลที่ส่งไปไม่ถูกรูปแบบ
• 401: ระบบไม่รู้ว่าคุณเป็นใคร มักเป็นเรื่อง login
• 403: รู้ว่าเป็นใคร แต่ไม่มีสิทธิ์ มักเกี่ยวกับ policy หรือ RLS
• 404: หาสิ่งที่ขอไม่เจอ เช่น ชื่อตารางหรือ URL ผิด
• 500: เซิร์ฟเวอร์พังเอง ต้องไปดู log ฝั่ง backend

4. Log ฝั่ง Backend

ถ้าใช้ฐานข้อมูลหรือ server function ส่วนใหญ่จะมีหน้าดู log ข้อความอย่าง "permission denied" หรือ "violates row-level security policy" บอกชัดว่าปัญหาอยู่ที่สิทธิ์ ไม่ใช่หน้าจอ

อ่าน Error ให้เป็น

ข้อความ error ส่วนใหญ่มีสามส่วน: ประเภท (เช่น TypeError) ข้อความอธิบาย (เช่น cannot read properties of undefined) และ ตำแหน่ง (ไฟล์และบรรทัด) คุณไม่จำเป็นต้องเข้าใจทุกคำ แค่ถาม AI ว่า "อธิบาย error นี้เป็นภาษาง่ายๆ ว่าเกิดจากอะไร" ก่อนสั่งแก้ คุณจะเริ่มจำรูปแบบที่เจอบ่อยได้เอง

กระบวนการ 5 ขั้นที่ช่วยหลุดจาก Fix Loop

1. ทำซ้ำให้ได้: จดขั้นตอนที่ทำให้เกิดปัญหาทุกครั้ง ถ้าทำซ้ำไม่ได้ ยังแก้ไม่ได้
2. เก็บหลักฐาน: error เต็มๆ, status code จาก Network, ภาพหน้าจอ
3. ขอการวินิจฉัยก่อน: "จากหลักฐานนี้ สาเหตุที่เป็นไปได้มีอะไรบ้าง เรียงจากน่าจะเป็นที่สุด ยังไม่ต้องแก้"
4. แก้ทีละจุด: เลือกสาเหตุที่น่าจะเป็นที่สุด แก้แค่จุดนั้น แล้วทดสอบตามขั้นตอนเดิม
5. ถ้าไม่หาย ย้อนกลับ: กลับไปเวอร์ชันก่อนแก้ แล้วลองสาเหตุถัดไป อย่าซ้อนการแก้หลายชั้นจนไม่รู้ว่าอะไรเปลี่ยน

ตัวอย่าง: ร้านเสื้อผ้าออนไลน์ บันทึกออเดอร์ไม่ได้

เจ้าของร้านเสื้อผ้าออนไลน์ในหาดใหญ่สร้างหน้าให้แอดมินบันทึกออเดอร์จากแชต วันหนึ่งกดบันทึกแล้วเงียบ เธอเปิดแท็บ Network พบคำขอสีแดง status 403 พร้อมข้อความว่าละเมิด row-level security policy เธอส่งข้อมูลนี้ให้ AI พร้อมบอกว่า "แอดมินที่ login แล้วต้องเพิ่มออเดอร์ได้ ลูกค้าทั่วไปห้ามเพิ่ม" AI อธิบายว่าตาราง orders มี policy ให้อ่านได้แต่ยังไม่มี policy ให้เพิ่มข้อมูล จึงเพิ่ม policy สำหรับบทบาทแอดมินโดยเฉพาะ แก้จบในรอบเดียว จากเดิมที่วนมาหลายรอบเพราะบอกแค่ว่า "กดแล้วไม่ทำงาน"

อย่าบอก AI ว่า "มันพัง" ให้บอกว่า "นี่คือหลักฐานว่ามันพังยังไง"

ข้อควรระวัง

• ก่อนแปะ log หรือภาพหน้าจอ ตรวจว่าไม่มี token, API key หรือข้อมูลลูกค้าจริงติดไป
• ถ้า AI เสนอให้ปิด RLS, ลบการตรวจสิทธิ์ หรือลบ test ออกเพื่อให้ error หาย นั่นคือการซ่อนปัญหา ไม่ใช่การแก้
• ระวังการให้ AI ลบหรือแก้ข้อมูลในฐานข้อมูลจริงระหว่าง debug ใช้ข้อมูลทดสอบเสมอ

ทำอะไรต่อ

1. ลองเปิด Console และ Network ในแอปของคุณวันนี้ แม้ยังไม่มี bug เพื่อให้คุ้นกับหน้าตา
2. สร้างแม่แบบรายงาน bug: ขั้นตอน สิ่งที่คาด สิ่งที่เกิด หลักฐาน
3. ทุกครั้งที่แก้สำเร็จ จดสาเหตุสั้นๆ ไว้ จะกลายเป็นคู่มือส่วนตัว

อยากให้ AI แก้ตรงจุดตั้งแต่ prompt แรก อ่านต่อที่ Prompt Pattern สำหรับ Vibe Coding และถ้าอยากฝึกกับเครื่องมือที่รันคำสั่งและอ่าน error ได้เอง ลองคอร์ส Claude Code 101 สำหรับมือใหม่ บน Plants.work