Gemini Canvas แอป Error แก้ยังไง? วิธีให้ AI ช่วย Debug

หากสร้างเว็บไซต์หรือแอปด้วย Gemini Canvas แล้วเจอปัญหา เช่น หน้า Preview ขาว ปุ่มกดไม่ได้ Form ไม่ทำงาน ข้อมูลไม่แสดง หรือมีข้อความ Error ไม่จำเป็นต้องลบแอปแล้วสร้างใหม่ทั้งหมด เพราะ Canvas มีเครื่องมือสำหรับช่วย Debug แอปโดยตรง

จุดสำคัญที่สุดคือ

อย่าสั่ง Gemini เพียงว่า “แอป Error ช่วยแก้ให้หน่อย”

เพราะคำสั่งกว้างเกินไปและอาจทำให้ Gemini แก้ Code จำนวนมากโดยไม่จำเป็น

Workflow ที่ดีกว่าคือ

ทำให้ Error เกิดซ้ำ → เปิด Console → อ่าน Error → ระบุ Component ที่มีปัญหา → ให้ Gemini แก้เฉพาะจุด → Preview ใหม่ → ทดสอบซ้ำ

Gemini Canvas ช่วยให้กระบวนการ Debug ง่ายขึ้นมาก เพราะสามารถใช้ AI ช่วยอ่าน Error และแก้ Code ได้โดยไม่จำเป็นต้องเข้าใจทุกบรรทัดตั้งแต่แรก

🛠️ Debug คืออะไร

Debug คือกระบวนการค้นหาและแก้ปัญหาในโปรแกรมหรือแอป

ตัวอย่างเช่น

แอปควรทำงานแบบนี้

กรอกข้อมูล → กด Save → ข้อมูลปรากฏ

แต่สิ่งที่เกิดขึ้นจริงคือ

กรอกข้อมูล → กด Save → ไม่มีอะไรเกิดขึ้น

นี่คือ Bug

การ Debug คือหาว่า

ทำไม Save ไม่ทำงาน

แล้วแก้เฉพาะสาเหตุนั้น

ไม่ใช่สร้างแอปใหม่ทั้งหมด

❶ แยกก่อนว่า Error แบบไหน

ก่อนแก้ต้องรู้ว่าปัญหาอยู่ประเภทไหน

🔴 Syntax Error

Code เขียนไม่ถูกตามกฎของภาษา

เช่น

• วงเล็บไม่ครบ
• Quote ไม่ครบ
• Comma ผิด
• Syntax ไม่สมบูรณ์

มักทำให้แอปไม่สามารถ Compile หรือ Render ได้

🟠 Runtime Error

Code เริ่มทำงานได้ แต่เกิด Error ระหว่างทำงาน

เช่น

• ตัวแปรไม่มี
• Function ไม่มี
• Object เป็น undefined
• API ตอบกลับผิด

🟡 Logical Error

อันตรายกว่า Error ที่มองเห็น

เพราะ App สามารถทำงานได้ แต่ผลลัพธ์ผิด

ตัวอย่าง

Income = 1,000

Expense = 300

แต่ Balance แสดง 1,300

ไม่มี Error Message

แต่ Logic ผิด

🔵 UI Error

Function ทำงานแต่หน้าเว็บมีปัญหา

เช่น

• Button หาย
• Text ล้น
• Card ซ้อนกัน
• Mobile Layout แตก

แต่ Logic อาจถูกต้องทั้งหมด

❷ ทำให้ปัญหาเกิดซ้ำก่อน

ก่อนให้ AI ช่วยแก้ ควรหาวิธีทำให้ Error เกิดซ้ำได้

ตัวอย่าง

1. เปิด App
2. กรอก Amount = 500
3. เลือก Expense
4. กด Add
5. ไม่มีรายการเพิ่ม

ตอนนี้เรามี Steps to Reproduce แล้ว

🎯 ทำไมสำคัญ

ถ้ารู้ว่า Error เกิดอย่างไร

หลังแก้สามารถทำขั้นตอนเดิมอีกครั้งเพื่อดูว่า Bug หายจริงหรือไม่

นี่เป็นพื้นฐานของ Debug ที่ดี

❸ เปิด Preview

Canvas มี Preview สำหรับทดลอง App ที่สร้างขึ้น

ใช้ Preview เหมือนเป็น User จริง

🧪 ทดลอง

• พิมพ์ข้อมูล
• กดปุ่ม
• เปิด Menu
• Submit Form
• เปลี่ยน Tab
• ลบข้อมูล
• Edit ข้อมูล

แล้วสังเกตว่า Error เกิดตรงไหน

📌 อย่าดูแค่หน้าตา

แอปที่ดูสวยอาจมี Function เสียหลายจุด

ต้องลองใช้งานจริง

❹ เปิด Show console

เมื่อ Preview มี Error หนึ่งในจุดแรกที่ควรเปิดคือ

Show console

Console ใช้ดู

• Errors
• Logs
• Warning
• ข้อความจาก Code

💻 บนคอมพิวเตอร์

เปิด App ใน Canvas

จากนั้นมองบริเวณด้านขวาบนของ Canvas แล้วเลือก

Show console

หากมี Error ระบบอาจแสดงรายละเอียดที่ช่วยระบุสาเหตุ

❺ Console บอกอะไรเราได้บ้าง

ตัวอย่าง Error ที่อาจพบ

ReferenceError

อาจหมายถึง Code เรียกตัวแปรหรือ Function ที่ไม่มี

TypeError

มักเกี่ยวกับการใช้ค่าหรือ Object ผิดประเภท

undefined

Code กำลังพยายามใช้ข้อมูลที่ยังไม่มี

null

ค่าที่คาดว่าจะมี แต่ตอนนั้นไม่มี

Network Error

อาจเกี่ยวกับ Request หรือ Service

Module Error

อาจเกี่ยวกับ Package หรือ Import

ไม่จำเป็นต้องจำ Error ทุกประเภท

สามารถ Copy Error แล้วให้ Gemini ช่วยอธิบายได้

❻ Copy Error ให้ Gemini วิเคราะห์

แทนที่จะบอกว่า

“มัน Error”

ให้บอกข้อมูลครบ

✅ Prompt ที่ดีกว่า

“เมื่อกดปุ่ม Save ใน Preview แล้วข้อมูลไม่ถูกเพิ่ม Console แสดง Error ต่อไปนี้: [Error] ช่วยวิเคราะห์ Root Cause ก่อน แล้วแก้เฉพาะส่วนที่ทำให้ Save ไม่ทำงาน ห้ามเปลี่ยน UI และ Feature อื่น”

Prompt นี้ให้ Gemini รู้

• Trigger
• Result
• Error
• Scope ที่ต้องแก้
• สิ่งที่ห้ามแก้

ทำให้ Debug แม่นกว่ามาก

❼ ให้ AI อธิบาย Root Cause ก่อนแก้

อย่ารีบให้ Gemini Rewrite Code

สามารถสั่งว่า

“อธิบายก่อนว่า Error เกิดจากอะไร แล้วเสนอส่วน Code ที่ต้องแก้”

🎯 ข้อดี

ช่วยให้เราเข้าใจว่า Bug อยู่ที่

• Event Handler
• State
• Variable
• Function
• Input
• API
• Component

ก่อนแก้จริง

แม้ไม่ใช่ Developer ก็จะเข้าใจระบบทีละส่วนมากขึ้น

❽ จำกัด Scope ให้ AI แก้เฉพาะจุด

นี่คือหนึ่งในคำสั่งที่ควรใช้บ่อยที่สุด

💬 ตัวอย่าง

“แก้เฉพาะฟังก์ชัน Add Transaction ห้ามเปลี่ยน Layout”

หรือ

“แก้เฉพาะ Mobile Menu ห้ามเปลี่ยน Desktop”

หรือ

“แก้เฉพาะ Validation ของ Email”

❌ หลีกเลี่ยง

“แก้ App ทั้งหมดให้ดีขึ้น”

เพราะ Scope กว้างเกินไป

อาจทำให้ Feature ที่ทำงานดีอยู่แล้วเปลี่ยนตามไปด้วย

❾ ใช้ Select and ask

หากเห็นชัดว่าปัญหาอยู่ที่ Component ใด สามารถใช้เครื่องมือเลือกเฉพาะส่วนนั้นใน Canvas แล้วสั่ง AI แก้

ตัวอย่าง

เลือกปุ่ม

Submit

แล้วสั่ง

“ปุ่มนี้กดแล้วไม่มีอะไรเกิดขึ้น ช่วยตรวจ Event และแก้เฉพาะ Button นี้”

หรือเลือก Form

“ตรวจ Validation ของ Form นี้ โดยห้ามแก้ Component อื่น”

วิธีนี้ช่วยลดขอบเขตการแก้ Code

❿ เปิด Code View

หากต้องการตรวจลึกขึ้นสามารถเปิด

Code

ใน Canvas

แม้ผู้ใช้ไม่ใช่ Programmer ก็ยังมีประโยชน์ เพราะสามารถดูได้ว่า App มี Code ส่วนใดเกี่ยวข้องกับ Bug

👨‍💻 Developer สามารถ

• แก้ Code โดยตรง
• Review AI-generated Code
• Refactor
• ตรวจ Function
• ตรวจ State
• ตรวจ Component

ได้

Canvas จึงไม่ล็อกผู้ใช้ให้อยู่กับ Prompt อย่างเดียว

⓫ ใช้ Show recent changes

ถ้า App ทำงานดีอยู่ก่อน แล้วเริ่ม Error หลังเพิ่ม Feature ใหม่

ควรตรวจ

Recent changes

🎯 ตัวอย่าง

Version ก่อนหน้า

App ใช้งานได้

จากนั้นสั่ง

“เพิ่ม Search”

แล้ว App พัง

จุดแรกที่ควรสงสัยคือ

Code ที่เปลี่ยนตอนเพิ่ม Search

ไม่ใช่ Code ทั้งโปรเจกต์

💡 หลัก Debug

Bug เริ่มหลังการเปลี่ยนอะไร → ตรวจการเปลี่ยนนั้นก่อน

⓬ Error หลังเพิ่ม Feature ใหม่

ตัวอย่าง

App เดิมทำงาน

จากนั้นเพิ่ม

• Dark Mode
• Search
• Chart
• AI
• Database
• Filter

แล้ว Error

✅ วิธีแก้

1. ทำให้ Error เกิดซ้ำ
2. เปิด Console
3. ดู Recent changes
4. ระบุ Feature ล่าสุด
5. ให้ Gemini ตรวจ Feature นั้น
6. แก้เฉพาะส่วน
7. Test

อย่าสร้างใหม่ทั้งหมด

⓭ Error ปุ่มกดไม่ได้

Button ไม่ทำงานเป็นปัญหาที่พบได้บ่อย

🔍 ตรวจ

• Event ถูกผูกหรือไม่
• Function มีหรือไม่
• Button ถูก Disable หรือไม่
• Validation ขวางหรือไม่
• Error ใน Function หรือไม่

💬 Prompt

“ปุ่ม Add กดได้แต่ไม่มี Transaction เพิ่ม Console มี Error นี้ ช่วยตรวจ Event Handler และ State ที่เกี่ยวข้อง ห้ามเปลี่ยน UI”

⓮ Error Form Submit ไม่ทำงาน

Form อาจไม่ทำงานเพราะ

• Required Field
• Validation
• Event
• State
• Function
• API

🧪 Test

กรอกข้อมูลครบก่อน

ถ้ายังไม่ผ่าน

ลองข้อมูลชนิดต่าง ๆ

💬 Prompt

“Form Submit ไม่ทำงานแม้กรอก Required Fields ครบ ช่วยตรวจ Validation กับ Submit Handler และแก้เฉพาะ Root Cause”

⓯ Error Input พิมพ์ไม่ได้

บางครั้ง Text Field แสดงแต่พิมพ์ไม่ได้

อาจเกี่ยวกับ

• State
• Value
• onChange
• Disabled Property

💬 Prompt

“ช่อง Name แสดงได้แต่พิมพ์ไม่ได้ ช่วยตรวจ State และ Input Handler ของช่องนี้เท่านั้น”

ไม่จำเป็นต้อง Rewrite Form ทั้งหมด

⓰ Error ข้อมูลไม่อัปเดต

ตัวอย่าง

กด Add แล้วรายการเพิ่ม

แต่ Summary ยังเป็นค่าเดิม

อาจหมายถึง

• State ไม่ Update
• Calculation ไม่ Recalculate
• Component ไม่ Re-render

💬 Prompt

“Transaction เพิ่มถูกต้อง แต่ Total Expense ไม่อัปเดต ช่วยตรวจเฉพาะ Calculation และ State ที่ใช้สร้าง Summary”

⓱ Error คำนวณผิดแต่ไม่มีข้อความแจ้ง

นี่คือ Logical Error

ตัวอย่าง

1000 – 300

ควรได้

700

แต่แสดง

1300

🧪 วิธี Debug

ใช้ข้อมูลเล็กที่รู้คำตอบแน่นอน

แล้วเปรียบเทียบ

💬 Prompt

“Balance ควรคำนวณ Income – Expense แต่ตอนนี้เหมือนนำมาบวกกัน ช่วยตรวจ Formula และแก้เฉพาะ Calculation Logic”

⓲ Error ข้อมูลหายหลัง Refresh

หาก App ต้องจำข้อมูล แต่ Refresh แล้วข้อมูลหาย

อาจเกิดจาก

• ยังไม่มี Persistent Storage
• Save ไม่ถูกเรียก
• Load ไม่ทำงาน
• Key ผิด

💬 Prompt

“รายการ Transaction หายหลัง Refresh ช่วยตรวจ Data Persistence และอธิบายว่าตอนนี้ App เก็บข้อมูลไว้ที่ไหนก่อนแก้”

คำว่า

อธิบายก่อน

มีประโยชน์มาก เพราะช่วยให้รู้ว่า App ใช้ Storage แบบไหน

⓳ Error หลังเพิ่ม Database

เมื่อ App เริ่มเก็บข้อมูลจริง ความซับซ้อนจะเพิ่มขึ้น

อาจมี Error เรื่อง

• Permission
• Read
• Write
• Connection
• Data Shape
• User Access

⚠️ อย่าแก้ด้วยการ

“เปิด Permission ทั้งหมด”

เพียงเพื่อให้ App ใช้งานได้

เพราะอาจสร้างปัญหาความปลอดภัย

ควรแก้ Root Cause ของสิทธิ์ให้ถูกต้อง

⓴ Error AI Generate ไม่ทำงาน

หากเพิ่ม Gemini Feature แล้วกด Generate ไม่มีผล

ตรวจ

• Required Input
• Loading State
• Console
• Feature Integration
• Account Eligibility
• Error Message

💬 Prompt

“Gemini Generate Button ไม่สร้าง Output ช่วยตรวจ Console และ AI Function ที่เกี่ยวข้อง ห้ามเปลี่ยน UI และ Non-AI Features”

㉑ Error AI สร้าง Output ว่าง

AI Function อาจ Run แต่ Output ไม่แสดง

อาจเกิดจาก

• Response Parsing
• State
• Rendering
• Empty Response
• Error Handling

💬 Prompt

“Request ดูเหมือนสำเร็จแต่ Output Area ยังว่าง ช่วยตรวจว่าคำตอบถูกส่งเข้า State และ Render ถูกหรือไม่”

㉒ Error AI สร้างข้อมูลผิดไม่ใช่ Bug ของ Code เสมอไป

หาก App ทำงาน แต่ AI ตอบผิด

นี่อาจไม่ใช่ Software Error

แต่เป็น

Prompt / AI Output Quality Problem

🎯 ตัวอย่าง

App Product Writer ทำงานครบ

แต่ AI แต่งราคาเอง

วิธีแก้คือปรับ Prompt Constraint เช่น

“ห้ามสร้างราคา ส่วนลด หรือข้อมูลที่ผู้ใช้ไม่ได้ให้”

ไม่จำเป็นต้องแก้ Architecture ของ App

㉓ Error หน้า Preview ขาว

Blank Screen เป็นอาการที่ต้องดู Console ก่อน

อาจเกิดจาก

• Runtime Error
• Component Crash
• Import Error
• Invalid Code
• Rendering Problem

✅ Workflow

Preview ขาว

↓

Show console

↓

หา Error แรก

↓

ให้ Gemini วิเคราะห์

↓

แก้เฉพาะ Root Cause

💬 Prompt

“Preview เป็นหน้าขาวทั้งหมด Console แสดง Error นี้ ช่วยหา Error แรกที่ทำให้ App Render ไม่ได้ และแก้เฉพาะ Root Cause”

㉔ Error Loading ไม่จบ

หาก App แสดง

Loading…

ตลอดเวลา

อาจเกิดจาก

• Promise ไม่จบ
• State ไม่ Reset
• API ไม่ตอบ
• Error แต่ไม่มี Catch
• Function Loop

💬 Prompt

“App ค้างที่ Loading หลัง Submit ช่วยตรวจ Flow ที่ตั้ง loading=true และตรวจว่ามีทุกกรณีที่ Reset กลับเป็น false หรือไม่”

นี่เป็น Prompt Debug ที่เจาะจงมากขึ้น

㉕ Error Console เยอะมากควรแก้อันไหนก่อน

บางครั้ง Console มี Error 10 รายการ

อย่าแก้ทุกอันพร้อมกัน

🎯 ให้ดู

Error แรก

เพราะ Error แรกอาจทำให้ Error หลัง ๆ เกิดตามมา

💬 Prompt

“Console มีหลาย Error ช่วยเรียงตาม Root Cause ที่น่าจะเกิดก่อน และแก้ Error หลักเพียงตัวแรกก่อน”

จากนั้น Test ใหม่

จำนวน Error อาจลดเอง

㉖ Warning ต้องแก้ทุกตัวไหม

ไม่ใช่ Warning ทุกตัวทำให้ App พัง

แต่ควรอ่าน

🔴 Error

มักสำคัญกว่า

🟡 Warning

อาจเป็น

• Deprecated
• Performance
• Key
• Best Practice

ให้แก้ Error ที่ทำให้ Function พังก่อน

แล้วค่อย Cleanup Warning

㉗ อย่าแก้หลาย Bug ใน Prompt เดียว

สมมติมี

1. Save ไม่ทำงาน
2. Mobile Menu พัง
3. Chart สีไม่สวย
4. Footer ใหญ่

ควรแก้ตามลำดับ

รอบ 1

Save

รอบ 2

Mobile Menu

รอบ 3

Chart

รอบ 4

Footer

โดยเฉพาะ Functional Bug ต้องมาก่อน Design Issue

㉘ จัดลำดับความรุนแรงของ Bug

สามารถแบ่งเป็น

🚨 Critical

App เปิดไม่ได้

🔴 High

Core Function ใช้ไม่ได้

🟡 Medium

Feature รองมีปัญหา

🟢 Low

Design หรือ Cosmetic Issue

แก้ตามลำดับ

Critical → High → Medium → Low

ไม่ควรเสียเวลาแก้สี Button ขณะที่ Save ใช้งานไม่ได้

㉙ ใช้ Minimal Reproduction

หาก App ซับซ้อนมาก ให้แยกปัญหาให้เล็กที่สุด

ตัวอย่าง Chart ไม่ทำงาน

แทนทดสอบทั้ง Dashboard

ให้ถามว่า

• Data มีไหม
• Calculation ถูกไหม
• Chart Component รับ Data หรือไม่

💬 Prompt

“แยก Root Cause ของ Chart โดยตรวจ Data Input, Transformation และ Rendering ทีละขั้น โดยยังไม่แก้ Code จนกว่าจะระบุจุดเสียได้”

ช่วยหลีกเลี่ยงการเดา

㉚ ตรวจ Input ก่อนโทษ Code

Bug หลายครั้งเกิดจาก Input

ตัวอย่าง

App คาดว่า

Amount = Number

แต่ได้รับ

“500 บาท”

เป็น Text

🔍 ตรวจ

• Type
• Empty
• Format
• Length
• Special Character

💬 Prompt

“ตรวจว่าปัญหานี้เกิดจาก Input Type หรือ Logic ก่อน แล้วเพิ่ม Validation หากจำเป็น”

㉛ ตรวจ Data Shape

App อาจคาดว่า Data เป็น

name

แต่ข้อมูลจริงใช้

fullName

หรือคาดว่า

amount

แต่ได้รับ

totalAmount

ทำให้ Error แม้ Logic ถูก

💬 Prompt

“ตรวจ Data Shape ที่ Component นี้ต้องการกับ Data ที่ได้รับจริง และระบุ Field ที่ไม่ตรงกัน”

㉜ ตรวจ State

App แบบ Interactive มักใช้ State จำนวนมาก

Bug เช่น

• ค่าไม่เปลี่ยน
• ค่า Reset เอง
• Component ไม่ Update

อาจเกี่ยวกับ State

💬 Prompt

“ตรวจ State Flow ตั้งแต่ Input → Submit → Update → Render และหาจุดที่ข้อมูลหยุดเปลี่ยน”

เป็นวิธีให้ AI Debug แบบเป็นขั้นตอน

㉝ ตรวจ Event

หาก Button กดไม่ได้หรือ Function ไม่ทำงาน

ตรวจ Event เช่น

• onClick
• onSubmit
• onChange

💬 Prompt

“ตรวจ Event Flow ของปุ่ม Generate ตั้งแต่ Click ไปจนถึง Function ที่ถูกเรียก และระบุว่าขาดขั้นตอนไหน”

㉞ ตรวจ Async Function

AI, API และ Database มักใช้ Async Operation

Bug ที่พบบ่อย

• ไม่ Await
• Error ไม่ Catch
• Loading ไม่ Reset
• Response ยังไม่มา

💬 Prompt

“ตรวจ Async Flow ของฟังก์ชันนี้ โดยเน้น await, try/catch และ loading state”

㉟ ตรวจ Try/Catch

Function ที่เชื่อม Service ภายนอกควรมี Error Handling

💬 Prompt

“เพิ่ม Error Handling เฉพาะ Function นี้ด้วย try/catch และแสดง User-friendly message โดยไม่ซ่อน Technical Error จาก Console”

จุดสำคัญคือ

User เห็นข้อความง่าย

Developer ยังเห็น Error จริงใน Console

㊱ อย่าซ่อน Error เพื่อให้ Console ดูสะอาด

วิธีแก้ที่ไม่ดีคือ Catch Error แล้วไม่ทำอะไร

เพราะ Bug ยังอยู่ เพียงแต่ไม่เห็น

❌ ไม่ควร

“ไม่ต้องแสดง Error”

✅ ควร

“จัดการ Error ให้เหมาะสม แต่ยัง Log Technical Detail ใน Console”

ช่วยให้ Debug ต่อได้

㊲ แก้แล้วต้อง Test Function เดิมอีกครั้ง

หลัง Gemini แก้ Bug

ให้ทำ Steps to Reproduce เดิม

ตัวอย่าง

ก่อนแก้

1. Add Expense 500
2. กด Save
3. ไม่เกิดอะไร

หลังแก้

ทำ 1–3 เหมือนเดิม

หากรายการเพิ่ม

Bug อาจถูกแก้

แต่ยังไม่จบ

ต้อง Test รอบอื่นด้วย

㊳ ทำ Regression Test

Regression คือปัญหาที่การแก้ Bug หนึ่งทำให้ Feature อื่นพัง

ตัวอย่าง

แก้ Save สำเร็จ

แต่ Delete กลับใช้ไม่ได้

✅ หลังแก้ควรทดสอบ

• Add
• Edit
• Delete
• Search
• Filter
• Summary

ตาม Feature หลักของ App

㊴ ทดสอบ Edge Cases หลังแก้

ถ้า Save ทำงานแล้ว

ลอง

• Amount = 0
• Amount ติดลบ
• ช่องว่าง
• ตัวเลขใหญ่
• Double Click

เพื่อดูว่า Bug ถูกแก้จริงหรือเพียงกรณีเดียว

㊵ เปรียบเทียบ Recent changes หลังแก้

เมื่อ Gemini แก้ Code แล้วสามารถดู Recent changes เพื่อดูว่าแก้อะไรไป

ถามตัวเองว่า

การเปลี่ยนนี้เกี่ยวข้องกับ Bug จริงไหม

หาก Gemini เปลี่ยน 15 Component เพื่อแก้ Button หนึ่งปุ่ม

ควรระวัง

🎯 การแก้ที่ดี

มักมี Scope ใกล้เคียงกับ Root Cause

㊶ ถ้า AI แก้แล้วแย่กว่าเดิม

ไม่จำเป็นต้องแก้ทับต่อไปเรื่อย ๆ

หาก Version ใหม่สร้าง Bug มากขึ้น

ให้กลับไป Version ก่อนหน้า แล้วลอง Prompt ใหม่ที่ Scope เล็กกว่า

💬 Prompt ใหม่

“Version ก่อนหน้าใช้งานได้ ยกเว้น Filter ช่วยแก้เฉพาะ Filter โดยห้าม Refactor Component อื่น”

ดีกว่าแก้ต่อจาก Version ที่เสียหลายจุด

㊷ อย่า Refactor พร้อม Debug

Debug กับ Refactor เป็นคนละงาน

Debug

ทำให้ Function กลับมาทำงาน

Refactor

ทำ Code ให้สะอาดขึ้นโดยไม่เปลี่ยน Behavior

ถ้าทำพร้อมกันจะยากต่อการรู้ว่าอะไรทำให้ Bug หายหรือเกิดใหม่

✅ แนะนำ

Debug ให้ผ่านก่อน

แล้วค่อย Refactor

㊸ Error เฉพาะมือถือ

หาก Desktop ใช้ได้แต่มือถือไม่ได้

ให้ระบุ Scope

💬 Prompt

“App ใช้งานได้บน Desktop แต่ Mobile Menu เปิดไม่ได้ ช่วยตรวจเฉพาะ Mobile Navigation และ Responsive Event โดยห้ามเปลี่ยน Desktop”

อย่าสั่งแก้ทั้ง Responsive Design หากมีปัญหาเพียง Menu

㊹ Error เฉพาะ Browser

หาก App ใช้ได้ Browser หนึ่งแต่ไม่ได้อีก Browser

อาจเกี่ยวกับ

• Compatibility
• API
• Storage
• CSS
• Browser Environment

ควรบอก Gemini ว่า

Browser ไหนใช้ได้ และ Browser ไหนไม่ได้

เพื่อช่วยลด Scope

㊺ Error จาก Network ไม่ใช่ Code เสมอไป

ถ้า App ต้องโหลด Service แล้ว Network มีปัญหา

Code อาจถูกต้อง

🔍 ตรวจ

• Connection
• Service Status
• Request
• Timeout

อย่า Rewrite Code ทันทีหาก Error ระบุปัญหา Network ชัดเจน

㊻ Error จาก Canvas เองก็เกิดได้

บางครั้งปัญหาอาจไม่ได้มาจาก Code ของ App แต่เกิดจาก Environment หรือ Service ชั่วคราว

สัญญาณเช่น

• App หลาย Project เปิดไม่ได้พร้อมกัน
• Code เดิมที่เคยทำงานไม่ Preview
• ไม่มีการเปลี่ยน Code แต่เริ่ม Error
• Refresh แล้วอาการเปลี่ยน

✅ ลอง

• Reload
• เปิด Chat ใหม่
• เปิด App เดิม
• ตรวจ Browser
• ทดสอบ Project ง่าย ๆ

ก่อน Rewrite Code ขนาดใหญ่

㊼ สร้าง Test App ขนาดเล็กเพื่อแยกปัญหา

ถ้าสงสัยว่า Environment มีปัญหา

ลองสร้าง App ง่ายมาก

เช่น

“สร้างปุ่มที่กดแล้วตัวเลขเพิ่ม 1”

หาก App ง่ายนี้ยัง Preview ไม่ได้

ปัญหาอาจไม่ใช่ Code ของ Project หลัก

วิธีนี้ช่วยแยกระหว่าง

App Bug

กับ

Environment Problem

㊽ ถ้า Canvas ไม่ Preview เลย

ลองตรวจตามลำดับ

❶ Code สร้างเสร็จหรือยัง

❷ Console มี Error ไหม

❸ Reload

❹ เปิด Chat เดิมใหม่

❺ ทดลอง App เล็ก

❻ ตรวจ Browser

❼ ตรวจ Network

หาก Project อื่นก็มีอาการเหมือนกัน อาจเป็นปัญหาของบริการหรือ Environment ชั่วคราว

㊾ อย่าลบ Project ก่อนรู้สาเหตุ

หากแอปมี Code จำนวนมาก

ไม่ควรลบแล้วเริ่มใหม่ทันที

เพราะอาจเสีย

• Prompt
• Version
• Structure
• Code ที่ดี
• History

ควร Debug และตรวจ Environment ก่อน

㊿ เก็บ Version ที่ทำงานได้

ทุกครั้งก่อนเพิ่ม Feature ใหญ่

ควรรู้ว่า Version ล่าสุดที่ใช้งานได้คือไหน

ตัวอย่าง

v1 – Core App Works

v2 – Search Works

v3 – AI Added

ถ้า v3 พัง

สามารถเปรียบเทียบกับ v2 ได้

ทำให้ Debug ง่ายขึ้นมาก

51. ใช้ Prompt “วิเคราะห์ก่อน ห้ามแก้”

นี่เป็นเทคนิคที่มีประโยชน์มาก

💬 Prompt

“วิเคราะห์ Error นี้ก่อน ห้ามแก้ Code ยัง ระบุ Root Cause ที่เป็นไปได้ 3 อันดับ และบอกว่าควรตรวจส่วนไหนก่อน”

ทำให้เราไม่ปล่อยให้ AI แก้แบบเดา

52. ใช้ Prompt “แก้ขั้นต่ำที่สุด”

หลังรู้ Root Cause

ใช้

“แก้ Code ให้น้อยที่สุดเพื่อแก้ Error นี้ โดยห้าม Refactor หรือเปลี่ยน UI”

🎯 เป้าหมาย

Small Fix

ดีกว่า

Big Rewrite

ในการ Debug

53. ใช้ Prompt “อธิบายสิ่งที่แก้”

หลังแก้เสร็จ

สั่ง

“สรุปว่าคุณเปลี่ยน Code จุดไหน ทำไม และควร Test อะไรต่อ”

ช่วยให้ผู้ใช้เข้าใจการเปลี่ยนแปลงและเตรียม Regression Test ได้ดีขึ้น

54. Prompt Debug ที่ดีที่สุดควรมีอะไร

ใช้สูตร

ปัญหา + ขั้นตอนที่ทำให้เกิด + Expected + Actual + Error + Scope

🔥 Template

“ใน App นี้ เมื่อฉัน [ขั้นตอน] ฉันคาดว่าจะ [Expected] แต่ตอนนี้ [Actual] และ Console แสดง [Error] ช่วยวิเคราะห์ Root Cause ก่อน แล้วแก้เฉพาะ [Component/Function] ห้ามเปลี่ยน [ส่วนที่ต้องรักษา]”

นี่เป็น Template ที่ใช้ Debug ได้กับ Bug จำนวนมาก

55. ตัวอย่าง Debug Expense Tracker

Problem

กด Add แล้วรายการไม่เพิ่ม

Prompt

“ใน Expense Tracker เมื่อกรอก Amount 500 เลือก Expense แล้วกด Add ฉันคาดว่าจะเห็นรายการใหม่และ Total Expense เพิ่ม 500 แต่ตอนนี้ไม่มีรายการเพิ่ม Console แสดง Error นี้ ช่วยวิเคราะห์ Root Cause แล้วแก้เฉพาะ Add Transaction Flow ห้ามเปลี่ยน Layout, Filter และ Delete”

ชัดกว่าคำว่า

“Expense Tracker ใช้ไม่ได้”

56. ตัวอย่าง Debug Calculator

Problem

คำนวณผิด

Prompt

“Loan Calculator Run ได้แต่ Monthly Payment ไม่ตรงกับสูตร ช่วยตรวจ Calculation Formula เท่านั้น ใช้ Input 100000, Interest 5%, 5 Years เป็น Test Case และห้ามเปลี่ยน UI”

มี Test Case ชัดเจน

57. ตัวอย่าง Debug AI Generator

Problem

Generate ค้าง

Prompt

“เมื่อกด Generate หลังกรอก Topic แล้ว App ค้างที่ Loading ตลอด ช่วยตรวจ async flow ของ Gemini generation, error handling และจุดที่ reset loading state โดยห้ามเปลี่ยน Prompt Logic และ UI”

ตรงกับอาการมาก

58. ตัวอย่าง Debug Mobile

Problem

ปุ่มล้นจอ

Prompt

“บน Desktop Layout ถูกต้อง แต่หน้าจอมือถือกว้างประมาณ 390px ปุ่ม CTA ล้นด้านขวา ช่วยแก้เฉพาะ Responsive CSS ของ CTA Container ห้ามเปลี่ยน Desktop Layout”

ยิ่งบอก Context ชัด ยิ่งควบคุมผลลัพธ์ได้ดี

🚀 Workflow ให้ AI ช่วย Debug ใน Gemini Canvas

ใช้ลำดับนี้เมื่อ App Error

❶ Reproduce

ทำให้ Bug เกิดซ้ำ

❷ Preview

ดูอาการ

❸ Console

เปิด Error และ Logs

❹ Scope

ระบุ Component

❺ Analyze

ให้ Gemini หา Root Cause

❻ Minimal Fix

แก้เฉพาะจุด

❼ Preview Again

เปิดใหม่

❽ Retest

ทำขั้นตอนเดิม

❾ Regression

Test Feature อื่น

❿ Recent Changes

ตรวจการเปลี่ยน Code

⓫ Save Stable Version

เก็บ Version ที่ใช้ได้

สูตรนี้มีประสิทธิภาพกว่าการสั่ง

“แก้ทุกอย่าง”

มาก

🔥 Prompt Debug Gemini Canvas พร้อมใช้

🛠️ วิเคราะห์ก่อน

“วิเคราะห์ Error ใน Console นี้ก่อน ห้ามแก้ Code จนกว่าจะระบุ Root Cause และ Component ที่เกี่ยวข้อง”

🔴 Blank Screen

“Preview เป็นหน้าขาว ช่วยตรวจ Error แรกใน Console ที่ทำให้ App Render ไม่ได้ และแก้ Root Cause เท่านั้น”

🔘 Button

“ปุ่มนี้กดแล้วไม่เกิด Action ช่วยตรวจ onClick และ Function ที่เกี่ยวข้อง ห้ามเปลี่ยน Design”

📝 Form

“Form Submit ไม่ทำงาน ช่วยตรวจ Validation และ Submit Handler โดยแก้เฉพาะส่วนที่จำเป็น”

🧮 Calculation

“App Run ได้แต่ Calculation ผิด ช่วยตรวจ Formula เท่านั้นและสร้าง Test Case เพื่อตรวจผล”

💾 Storage

“ข้อมูลหายหลัง Refresh ช่วยอธิบาย Storage ปัจจุบันก่อน แล้วแก้ Data Persistence โดยห้ามเปลี่ยน UI”

🤖 AI

“AI Generation ค้างที่ Loading ช่วยตรวจ Async Flow, Error Handling และ Loading State โดยห้ามเปลี่ยน Prompt ของ AI”

📱 Mobile

“แก้เฉพาะ Mobile Layout ที่มีปัญหา ห้ามเปลี่ยน Desktop”

⚠️ ข้อผิดพลาดที่พบบ่อยเวลาให้ AI Debug

❌ บอกว่า “พัง”

ข้อมูลไม่พอ

❌ ไม่ส่ง Error

AI ต้องเดา

❌ Rewrite App ทั้งหมด

เสี่ยง Bug ใหม่

❌ แก้หลาย Issue พร้อมกัน

หาสาเหตุยาก

❌ ไม่ Test หลังแก้

ไม่รู้ว่า Bug หายจริงไหม

❌ ไม่ทำ Regression Test

แก้หนึ่งอย่างพังอีกอย่าง

❌ แก้ Warning ก่อน Critical Error

ผิดลำดับความสำคัญ

❌ ซ่อน Error แทนการแก้

Bug ยังอยู่

❌ Refactor พร้อม Debug

เปลี่ยนมากเกินไป

❌ เชื่อ AI ว่า “แก้แล้ว”

ต้องทดลองจริง

✅ Checklist ก่อนให้ Gemini Debug

🧪 Reproduce ได้ไหม

รู้ขั้นตอนที่ทำให้ Error เกิด

🎯 Expected คืออะไร

รู้ว่าควรเกิดอะไร

❌ Actual คืออะไร

รู้ว่าเกิดอะไรแทน

🛠️ Console เปิดหรือยัง

มี Error ไหม

🧩 Component ไหนมีปัญหา

จำกัด Scope

🕒 Bug เริ่มหลังเปลี่ยนอะไร

ดู Recent changes

✅ Checklist หลัง AI แก้

▶️ Bug เดิมหายไหม

ทำ Steps เดิม

🛠️ Console ยังมี Error ไหม

ตรวจอีกครั้ง

🔘 Feature หลักยังทำงานไหม

Regression Test

📱 Mobile ยังดีไหม

ถ้าเกี่ยวข้อง

🧮 Logic ถูกไหม

Test ด้วยค่าที่รู้คำตอบ

📝 Recent changes เหมาะไหม

AI เปลี่ยนมากเกินไปหรือไม่

💾 เก็บ Version ที่ใช้งานได้หรือยัง

สำคัญก่อนเพิ่ม Feature ใหม่

❓ คำถามที่พบบ่อยเกี่ยวกับ Gemini Canvas App Error

Gemini Canvas ดู Error ของแอปได้ไหม

ได้ สามารถเปิด Show console เพื่อดู Errors และ Logs จาก Preview

ดู Code ของแอปได้ไหม

ได้ บนคอมพิวเตอร์สามารถเปิด Code View และแก้ Code โดยตรงได้

ดูว่า Gemini แก้อะไรไปล่าสุดได้ไหม

ได้ สามารถเปิด Code และดู Recent changes เพื่อช่วยติดตามการแก้ล่าสุด

ให้ Gemini ช่วย Debug ได้ไหม

ได้ สามารถส่ง Error และอธิบายอาการให้ Gemini ช่วยหา Root Cause และแก้ Code ได้

ควรส่งอะไรให้ Gemini ตอน Debug

ควรให้ Steps to Reproduce, Expected Result, Actual Result, Error Message และ Component ที่เกี่ยวข้อง

ควรให้ Gemini Rewrite App ใหม่ไหม

โดยทั่วไปไม่ควร หาก Bug อยู่เพียงจุดเดียว ควรแก้เฉพาะ Root Cause ก่อน

Preview ขาวทำอย่างไร

เปิด Show console แล้วตรวจ Error แรกที่เกี่ยวข้องกับ Rendering จากนั้นให้ Gemini ช่วยวิเคราะห์

App ไม่มี Error แต่คำนวณผิดทำอย่างไร

นี่อาจเป็น Logical Error ต้องสร้าง Test Case ที่รู้คำตอบและตรวจ Formula

AI Feature สร้างข้อมูลผิดถือเป็น Code Error ไหม

ไม่เสมอไป หาก Function ทำงานแต่ Output ไม่ดี อาจเป็น Prompt หรือ AI Quality Problem มากกว่า Software Bug

แก้ Bug แล้วต้อง Test Feature อื่นไหม

ควร เพราะการแก้ Code หนึ่งส่วนอาจทำให้ Function อื่นเกิด Regression

🎯 สรุป Gemini Canvas แอป Error แก้ยังไง

เมื่อ App ใน Gemini Canvas มี Error สิ่งที่ไม่ควรทำเป็นอันดับแรกคือ

ลบแล้วสร้างใหม่

หรือ

สั่ง Gemini ให้แก้ทั้ง App

วิธีที่ควรใช้คือ

Reproduce → Preview → Show console → อ่าน Error → ระบุ Scope → ให้ AI วิเคราะห์ Root Cause → Minimal Fix → Retest → Regression Test

บน Canvas สามารถใช้เครื่องมือสำคัญอย่าง

Preview

สำหรับทดลอง App

Show console

สำหรับดู Errors และ Logs

Code

สำหรับดูหรือแก้ Code

Recent changes

สำหรับตรวจสิ่งที่เปลี่ยนล่าสุด

และ

Select and ask

สำหรับเลือก Component เฉพาะส่วนแล้วให้ Gemini แก้

Prompt Debug ที่มีประสิทธิภาพควรมีข้อมูลแบบนี้

เกิดอะไร → ทำอย่างไรถึงเกิด → ควรเกิดอะไร → เกิดอะไรแทน → Console บอกอะไร → ต้องแก้เฉพาะส่วนไหน

ตัวอย่าง

“เมื่อกด Save หลังกรอกข้อมูลครบ ฉันคาดว่าจะมีรายการใหม่ แต่ไม่มีอะไรเกิดขึ้น Console แสดง Error นี้ ช่วยวิเคราะห์ Root Cause และแก้เฉพาะ Save Function ห้ามเปลี่ยน UI”

นี่ดีกว่า

“แอป Error แก้ให้หน่อย”

อย่างมาก

และหลัง Gemini บอกว่าแก้แล้ว ต้องจำหลักสำคัญที่สุดไว้ว่า

AI บอกว่าแก้แล้ว ≠ Bug หายแล้ว

ต้อง Preview และ Test ด้วยตัวเองอีกครั้งเสมอ

เมื่อ Debug แบบจำกัด Scope และแก้ทีละจุด Gemini Canvas จะช่วยให้แม้แต่ผู้ที่ไม่ได้เป็น Developer เต็มตัวสามารถค่อย ๆ หา Bug เข้าใจ Error และพัฒนา App Prototype ให้มีความเสถียรมากขึ้นได้โดยไม่ต้องเริ่ม Project ใหม่ทุกครั้ง