เคล็ดลับให้ AI แก้บั๊กตรงจุด: ส่ง error และภาพหน้าจอยังไงให้ได้ผล

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

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

สรุปสั้นก่อนอ่าน
✅ เล่าบั๊กให้ครบ 5 ส่วน: ทำอะไร คาดว่าจะเห็นอะไร เห็นอะไรจริง ข้อความ error และอยู่หน้าไหน
✅ error ที่ AI ต้องการมักอยู่ใน Console ของเบราว์เซอร์ (กด F12) หรือในแท็บ บันทึกการทำงาน ของโปรเจกต์
✅ ภาพหน้าจอช่วยมากกับปัญหาหน้าตา แต่ error ให้ คัดลอกเป็นข้อความ ด้วยเสมอ
✅ สั่งให้ AI อธิบายสาเหตุก่อนแก้ แก้ทีละเรื่อง แล้วตรวจเว็บจริงหลัง deploy
✅ แก้ 3 รอบไม่หาย ให้หยุด แล้วเริ่มใหม่ด้วยข้อมูลที่ครบขึ้น

ทำไมบอกว่า "ปุ่มไม่ทำงาน" แล้ว AI แก้ไม่ได้

ประโยค "ปุ่มไม่ทำงาน" อาจหมายถึงเรื่องต่างกันเป็นสิบแบบ กดแล้วไม่มีอะไรเกิดขึ้น กดแล้วหมุนค้าง กดแล้วขึ้น error สีแดง บันทึกแล้วแต่ข้อมูลไม่เข้าฐานข้อมูล หรือปุ่มไม่ขึ้นมาให้กดเลย แต่ละแบบมีสาเหตุคนละที่ บางแบบอยู่ในหน้าเว็บ บางแบบอยู่ฝั่งเซิร์ฟเวอร์

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

เล่าบั๊กให้ครบ 5 ส่วน

1. ทำอะไร เขียนเป็นขั้นตอนที่คนอื่นทำตามได้ เช่น "ล็อกอินเป็นแอดมิน › เข้าหน้าสินค้า › กดเพิ่มสินค้า › กรอกชื่อและราคา › กดบันทึก"
2. คาดว่าจะเห็นอะไร เช่น "สินค้าใหม่ขึ้นในรายการ"
3. เห็นอะไรจริง เช่น "ปุ่มหมุนค้าง 5 วินาทีแล้วหยุด รายการไม่เปลี่ยน"
4. ข้อความ error คัดลอกมาทั้งบรรทัด อย่าพิมพ์สรุปเอง (วิธีหาอยู่ในหัวข้อถัดไป)
5. บริบท อยู่หน้าไหน (ส่งลิงก์ของหน้านั้น) ใช้คอมพิวเตอร์หรือมือถือ เบราว์เซอร์อะไร เกิดทุกครั้งหรือบางครั้ง และเริ่มเป็นหลังจากแก้อะไรไปล่าสุด

ข้อ 5 ส่วนท้ายสำคัญกว่าที่คิด ถ้าบั๊กเพิ่งเกิดหลังเพิ่มฟีเจอร์ใหม่ บอก AI ไปเลย AI จะเริ่มดูจากโค้ดส่วนที่เพิ่งแก้ แทนที่จะไล่ทั้งโปรเจกต์

error อยู่ตรงไหน: 3 ที่ที่ควรดู

1. Console ของเบราว์เซอร์ (สำหรับปัญหาในหน้าเว็บ)

บนคอมพิวเตอร์ เปิดหน้าที่มีปัญหาใน Chrome หรือ Edge กด F12 (Mac กด Cmd + Option + I) แล้วเลือกแท็บ Console ทำขั้นตอนที่ทำให้เกิดบั๊กอีกครั้ง บรรทัดสีแดงที่ขึ้นมาคือสิ่งที่ AI อยากเห็นที่สุด คลิกขวาที่บรรทัดนั้นแล้วคัดลอก หรือลากคลุมแล้วคัดลอกเป็นข้อความ

2. แท็บ Network (สำหรับปัญหาที่ส่งข้อมูลไม่สำเร็จ)

ในหน้าต่างเดียวกัน เลือกแท็บ Network แล้วทำขั้นตอนเดิมอีกครั้ง มองหาแถวที่เป็นสีแดง หรือคอลัมน์ Status เป็นเลข 4xx หรือ 5xx บอก AI ว่าคำขอไหน (ชื่อในคอลัมน์ Name) ได้สถานะอะไร ถ้าคลิกแถวนั้นแล้วมีข้อความในแท็บ Response ให้คัดลอกไปด้วย

• 4xx (เช่น 401, 403, 404) มักเป็นเรื่องสิทธิ์ ล็อกอิน หรือที่อยู่ของ API ผิด
• 5xx (เช่น 500, 502) แปลว่าฝั่งเซิร์ฟเวอร์ล้ม ต้องดู log ของแอปต่อ

3. แท็บ บันทึกการทำงาน ของโปรเจกต์ (สำหรับ error ฝั่งเซิร์ฟเวอร์)

เว็บที่มีแอปทำงานอยู่ (เช่น Node.js, PHP, Python) ให้เปิดหน้าโปรเจกต์บน BrewInTH แท็บ บันทึกการทำงาน แล้วกด ดึง log ล่าสุด ทำทันทีหลังจากทำให้บั๊กเกิด เพื่อให้บรรทัด error ล่าสุดอยู่ในนั้น คัดลอกช่วงที่มีคำว่า error หรือ exception พร้อมบรรทัดรอบ ๆ ไปให้ AI (เว็บ static ไม่มีแท็บนี้ เพราะไม่มีแอปทำงานอยู่ ใช้ Console ของเบราว์เซอร์แทน)

ถ้าใช้ AI ที่ทำงานบนคอมพิวเตอร์ (Claude Code, Codex, Cursor, Windsurf) ผ่านลิงก์ + token ของโปรเจกต์ AI ดึง log ของแอปเองได้ด้วยเครื่องมือ logs_tail และให้ระบบเปิดหน้าเว็บจริงตรวจด้วย site_check คุณจึงไม่ต้องคัดลอก log ฝั่งเซิร์ฟเวอร์เอง แต่ error ใน Console ของเบราว์เซอร์ AI มองไม่เห็น ยังต้องคัดลอกไปให้

ภาพหน้าจอ: ช่วยตอนไหน และส่งยังไง

ภาพหน้าจอเหมาะกับ ปัญหาหน้าตา เช่น ตัวหนังสือล้นกรอบ ปุ่มซ้อนกัน สีอ่านไม่ออก หรือหน้าบนมือถือเพี้ยน ส่งให้ได้ผลแบบนี้

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

แต่ error อย่าส่งเป็นภาพอย่างเดียว ข้อความในภาพอาจถูกอ่านผิดหรือถูกตัด และ AI ค้นหาข้อความนั้นในโค้ดไม่ได้ ให้คัดลอกเป็นข้อความ แล้วแนบภาพประกอบถ้าจำเป็น

ส่งให้ AI: ข้อความตัวอย่างที่คัดลอกไปใช้ได้

เว็บของฉันบน BrewInTH มีบั๊ก ช่วยหาสาเหตุและแก้ให้

ทำอะไร: ล็อกอินเป็นแอดมิน › หน้าสินค้า › กดเพิ่มสินค้า › กรอกชื่อ "กาแฟเย็น" ราคา 45 › กดบันทึก
คาดว่า: สินค้าใหม่ขึ้นในรายการ
ที่เกิดจริง: ปุ่มหมุนค้างแล้วหยุด รายการไม่เปลี่ยน เกิดทุกครั้ง
หน้า: https://<ชื่อเว็บ>.host.brewinth.net/admin/products (Chrome บนคอมพิวเตอร์)
เริ่มเป็นหลังจาก: เพิ่มช่องรูปสินค้าเมื่อวาน

Console: <วางบรรทัดสีแดงที่คัดลอกมา>
Network: POST /api/products ได้ 500
log ของแอป: <วางช่วงที่มี error>

ขั้นตอน:
1. อธิบายสาเหตุเป็นภาษาง่าย ๆ ก่อนแก้
2. แก้เฉพาะเรื่องนี้ ห้ามลบหรือล้างข้อมูลในฐานข้อมูล
3. deploy แล้วตรวจหน้านี้บนเว็บจริงด้วยขั้นตอนเดิม
4. ถ้าแก้ไม่ได้ใน 3 รอบ หยุดแล้วสรุปว่าลองอะไรไปแล้ว

ส่งในแชตเดิมที่ AI เคยทำเว็บนี้ จะดีที่สุด เพราะ AI จำโครงสร้างของโปรเจกต์ได้ ถ้า token เดิมหมดอายุแล้ว กดปุ่ม สร้างลิงก์และ token สำหรับ AI (อัตโนมัติ) ในหน้าโปรเจกต์ แล้วใช้กรอบ ต่องานเดิมที่ AI เคยทำไว้ (token เดิมหมดอายุ) คัดลอกข้อความสั้นไปวางในแชตเดิม

วนแก้ให้จบ ไม่ใช่วนแก้ไม่จบ

• แก้ทีละเรื่อง ถ้าเจอบั๊ก 4 อย่าง ส่งทีละอย่าง หรือเรียงลำดับให้ AI แก้ทีละข้อแล้วตรวจทีละข้อ การสั่งแก้ทุกอย่างพร้อมกันทำให้ไม่รู้ว่าอะไรทำให้อะไรพัง
• ตรวจด้วยขั้นตอนเดิม หลัง AI บอกว่าแก้แล้ว ให้ทำตามขั้นตอนข้อ 1 อีกครั้งบนเว็บจริง ถ้ายังไม่หาย ส่ง error ใหม่กลับไป (error มักเปลี่ยน ซึ่งแปลว่าเข้าใกล้แล้ว)
• รีเฟรชให้แน่ใจ บางครั้งเบราว์เซอร์ยังใช้ไฟล์เก่า กด Ctrl + Shift + R (Mac: Cmd + Shift + R) ก่อนสรุปว่ายังไม่หาย
• 3 รอบไม่หาย ให้หยุด ขอให้ AI สรุปว่าลองอะไรไปแล้ว แล้วเริ่มแชตใหม่หรือรอบใหม่พร้อมสรุปนั้นและข้อมูลที่ครบขึ้น ดีกว่าให้ AI แก้ทับกันไปเรื่อย ๆ
• เว็บต้องใช้งานด่วน ถ้าบั๊กเกิดหลัง deploy ครั้งล่าสุด ไปที่แท็บ การเผยแพร่ › ประวัติการเผยแพร่ แล้วกด กลับมาใช้เวอร์ชันนี้ ที่เวอร์ชันก่อนหน้าก่อน การย้อนกลับเปลี่ยนเฉพาะโค้ด ไม่ย้อนข้อมูลในฐานข้อมูล

ข้อควรระวัง: อย่าส่งของลับไปพร้อม error

log และภาพหน้าจอบางครั้งมีข้อมูลที่ไม่ควรส่งต่อ ก่อนวางให้ AI หรือส่งให้ใคร ตรวจดูก่อน

• รหัสผ่าน API key token ของโปรเจกต์ หรือค่าใน ตั้งค่าแอป ให้ลบหรือแทนด้วย ***
• ข้อมูลส่วนตัวของลูกค้าในหน้าจอ เช่น ชื่อ เบอร์โทร ที่อยู่ ให้เบลอก่อนส่ง
• ถ้าเผลอส่ง API key ไปแล้ว ให้เปลี่ยน key ใหม่ที่ผู้ให้บริการนั้น แล้วอัปเดตค่าใน ตั้งค่าแอป

คำถามที่พบบ่อย

ไม่รู้จะกด F12 ยังไงบนมือถือ

เบราว์เซอร์บนมือถือเปิด Console ไม่ได้ง่ายเหมือนคอมพิวเตอร์ ถ้าบั๊กเกิดบนมือถืออย่างเดียว ส่งภาพหน้าจอพร้อมขั้นตอน แล้วลองเปิดหน้าเดียวกันบนคอมพิวเตอร์ในโหมดจำลองมือถือ (ใน F12 มีปุ่มสลับขนาดจอ) ถ้าเกิดซ้ำได้ก็คัดลอก error จากที่นั่น

Console มี error เยอะมาก ส่งอันไหน

ส่งบรรทัดแรกที่เกิดหลังจากคุณกดปุ่มที่มีปัญหา บรรทัดที่ขึ้นก่อนหน้านั้นอาจเป็นเรื่องอื่น ถ้าไม่แน่ใจ กดไอคอนล้าง Console ก่อน แล้วทำขั้นตอนเดิมอีกครั้ง จะเหลือเฉพาะ error ที่เกี่ยวข้อง

ใช้ ChatGPT ในหน้าแชต ไม่มีลิงก์ + token ทำยังไง

ใช้วิธีเดียวกันได้ เล่าบั๊กให้ครบ 5 ส่วน คัดลอก error และ log ไปวาง แล้วให้ AI ส่งไฟล์ที่แก้แล้วมา จากนั้นนำขึ้นโปรเจกต์เดิมผ่านเมนู อัปโหลดแล้วขึ้นเว็บ ระบบอัปเดตเว็บเดิม ไม่สร้างโปรเจกต์ใหม่

deploy ไม่ผ่านเลย ไม่ใช่บั๊กในหน้าเว็บ

กรณีนั้นดูที่ log ของการเผยแพร่แทน อ่านวิธีในบทความ deploy ไม่ผ่านหรือเว็บช้า? ให้ AI อ่าน log แล้วแก้เอง

ลองทุกอย่างแล้วยังไม่หาย

ไปที่เมนู ซัพพอร์ตลูกค้า ในคอนโซล แนบภาพหน้าจอและ error พร้อมชื่อโปรเจกต์ ทีมงานช่วยดูได้

สรุป

AI แก้บั๊กได้เร็วเมื่อเห็นสิ่งเดียวกับที่คุณเห็น เล่าให้ครบ 5 ส่วน คัดลอก error จาก Console ของเบราว์เซอร์และ log ของแอปเป็นข้อความ ใช้ภาพหน้าจอกับปัญหาหน้าตา แล้วสั่งให้ AI อธิบายก่อนแก้ แก้ทีละเรื่อง และตรวจบนเว็บจริงทุกครั้ง

ไปที่โปรเจกต์ของฉัน →

บทความที่เกี่ยวข้อง

• deploy ไม่ผ่านหรือเว็บช้า? ให้ AI อ่าน log แล้วแก้เอง
• 10 prompt ให้ AI สร้างเว็บที่ใช้งานได้จริง แล้วขึ้นออนไลน์บน BrewInTH