กดปุ่มเพิ่มจำนวน 1 ครั้ง ตัวเลขบนจอยังค้างอยู่ที่ 1 พอกดเพิ่มอีก 2 ทีก็ยังนิ่งสนิท แต่พอรีเฟรชหน้าเว็บ ตัวเลขกลับกระโดดเป็น 3 ทันที

เหตุการณ์นี้แปลว่า ทุกครั้งที่เรากดปุ่ม ข้อมูลข้างในระบบเปลี่ยนจริงครบทั้ง 3 ครั้งแล้ว แต่หน้าจอไม่ได้อัปเดตตาม

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

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

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

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

เรื่องนี้จึงแบ่งออกเป็น 2 ชั้นที่แยกจากกันชัดเจน:

1. ข้อมูลเปลี่ยน: ระบบบันทึกข้อมูลใหม่เรียบร้อยแล้ว
2. หน้าจออัปเดต: หน้าจอดึงข้อมูลใหม่มาแสดงผล

กรณีนี้ ข้อมูลเปลี่ยนเรียบร้อยแล้ว แต่ระบบยังไม่ได้สั่งให้หน้าจออัปเดตตาม พอเรากดรีเฟรชหน้าเว็บที่เป็นการโหลดและวาดหน้าจอใหม่ทั้งหมดตั้งแต่ต้น ข้อมูลที่ถูกต้องถึงจะแสดงขึ้นมา

ทำไม AI ถึงไม่รู้ว่าโค้ดมีปัญหา

เหตุผลคือในมุมของ AI มันเขียนโค้ดตามที่เราสั่งครบถ้วนแล้ว

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

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

AI จึงไม่มีทางรู้เอง ถ้าเราไม่สังเกตเห็นอาการบนหน้าจอแล้วบอกมันตรงๆ

วิธีบอกอาการให้ AI แก้ถูกชั้น

เวลาบอกอาการให้ AI ฟัง ให้เรียง 3 อย่างตามลำดับนี้: เราทำอะไร เห็นอะไรบนหน้าจอ และผลหลังรีเฟรชเป็นอย่างไร

ตัวอย่าง Prompt ที่หยิบไปใช้สั่งได้เลย:

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

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

ลองเทียบกับวิธีสั่งที่มักทำให้ AI หลงทาง:

• บอกกว้างๆ ว่า "ปุ่มไม่ทำงาน": ไม่ได้บอกว่าอะไรบนหน้าจอไม่เป็นไปตามที่คาด AI จึงต้องเดาเองว่าปัญหาอยู่ที่ชั้นไหน
• เดาเองว่า "โค้ด State น่าจะพัง": เป็นการระบุจุดที่มีปัญหาแทน AI ถ้าเราระบุผิด มันก็แก้ผิดจุดตามไปด้วย

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

2 ขั้นตอนเช็กง่ายๆ ว่าปัญหาอยู่ที่ข้อมูลหรือหน้าจอ

ประโยคข้างบนใช้ได้เมื่อรู้แน่แล้วว่าปัญหาอยู่ที่หน้าจอ วิธีเช็กให้แน่ใจคือดู 2 ข้อนี้:

1. ลองกดปุ่มแล้วรีเฟรชหน้าเว็บ

• ถ้ารีเฟรชแล้วเห็นค่าใหม่: ค่าใหม่มีอยู่จริงแล้ว แต่หน้าจอยังไม่อัปเดตตาม
• ถ้ารีเฟรชแล้วยังเป็นค่าเดิม: ค่าใหม่ไม่โผล่แม้แต่ตอนวาดหน้าจอใหม่ทั้งหน้า อาการจึงไม่ได้จบอยู่แค่ที่หน้าจอ

2. สังเกตว่าตัวเลขนิ่งสนิท หรือเปลี่ยนแล้วเด้งกลับเป็นค่าเดิม

• ตัวเลขนิ่งสนิท: ตัวเลขบนหน้าจอไม่เปลี่ยนเลยตั้งแต่ต้น
• ตัวเลขเปลี่ยนแล้วเด้งกลับ: หน้าจอขึ้นค่าใหม่ให้เห็นแล้ว แต่สุดท้ายกลับไปเป็นค่าเดิม

สองอาการนี้ต่างกัน และเป็นรายละเอียดที่ AI เอาไปใช้ต่อได้ ถ้าเราเล่าไปตามที่เห็น

เราเอาผลจากการเช็ก 2 ข้อนี้ไปเล่าให้ AI ฟังได้ตรงๆ โดยไม่ต้องเปิดโค้ดดูสักบรรทัด

หลักการสำคัญคือ บอกเฉพาะอาการที่เห็นบนหน้าจอ ไม่ต้องเดาว่าโค้ดส่วนไหนผิด

AI แก้โค้ดให้ได้ แต่เราต้องเป็นคนบอกอาการ

การแก้โค้ดให้หน้าจออัปเดตตามข้อมูลเป็นงานพื้นฐานที่ AI ทำได้ ถ้ามันรู้ว่าต้องแก้ตรงนั้น

AI สังเกตสิ่งที่เกิดขึ้นบนหน้าจอแทนเราไม่ได้ เพราะมันไม่ได้นั่งดูหน้าจออยู่กับเรา มันจึงไม่รู้ว่าเรากดอะไรไป ตัวเลขขยับไหม หรือรีเฟรชแล้วค่าเปลี่ยนหรือไม่

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