~/VibeHandbook
PDF ฟรี

บท 12 · 03

การป้อนบริบทที่ถูกต้องให้ AI

ตรงนี้คือจุดที่คุณมีอำนาจต่อรองมากที่สุด เมื่อรายงานบั๊ก ให้ใส่:

  • ข้อความข้อผิดพลาด แบบคำต่อคำ คัดลอกมาให้เป๊ะ — อย่าถอดความเอง การถอดความข้อผิดพลาดก็เหมือนกับการบรรยายภาพถ่ายผ่านโทรศัพท์: คุณจะพลาดรายละเอียดสำคัญที่สุดไปโดยไม่รู้ตัว
  • Stack trace โดยเฉพาะไม่กี่บรรทัดบนสุด
  • โค้ดที่เกี่ยวข้อง — ฟังก์ชันที่ทำให้เกิดข้อผิดพลาด บวกกับทุกอย่างที่มันเรียกใช้
  • สิ่งที่คุณคาดหวัง เทียบกับสิ่งที่เกิดขึ้นจริง

นี่คือตัวอย่างของพรอมต์การดีบักที่ดี:

I'm getting an error when I submit the signup form. Here's the full output:

TypeError: Cannot read properties of undefined (reading 'email')
    at validateUser (src/auth/validate.js:14:23)
    at handleSignup (src/routes/signup.js:31:10)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Steps to reproduce: fill in the form, click "Sign up".
Expected: a "Welcome" message.
Actual: the page goes blank and the error above appears in the console.

Here is validate.js (lines around 14):
[paste the function]

And here is the handleSignup function that calls it:
[paste the function]

What could be causing this, and how do I confirm it before changing anything?

สังเกตบรรทัดสุดท้าย คุณกำลังขอ สมมติฐานและขั้นตอนยืนยัน ไม่ใช่การแก้ไขทันที นั่นทำให้ AI ยังคงซื่อตรงกับหลักฐาน

การรู้วิธี อ่าน trace ที่คุณกำลังวางลงไปนั้นช่วยได้มาก stack trace คือประวัติการเรียกฟังก์ชัน โดยเรียงจากล่าสุดไปเก่าสุด: บรรทัดบนสุดคือจุดที่โปรแกรมระเบิดจริง ๆ และแต่ละบรรทัดด้านล่างคือฟังก์ชันที่เรียกบรรทัดด้านบนมันขึ้นมา ดังนั้นในตัวอย่างนี้ validateUser คือจุดที่ email ถูกอ่านจากสิ่งที่เป็น undefined และ handleSignup คือผู้ที่เรียก validateUser ส่วนเฟรมด้านล่างโค้ดของคุณเอง — อย่าง processTicksAndRejections — เป็นของรันไทม์ของภาษา คุณมักจะข้ามมันไปได้เลย อ่านจากบนลงล่างจนกว่าจะเจอบรรทัดแรกที่ชี้ไปที่ ไฟล์ของคุณเอง และตรงนั้นมักจะเป็นจุดที่ควรเริ่มมองหา

trace เดียวกัน เมื่อมองเป็นกองของการเรียกฟังก์ชัน จะทำให้ลำดับชัดเจนขึ้น การล่มอยู่บนสุด และแต่ละเฟรมด้านล่างคือผู้เรียกของเฟรมด้านบน:

   READ THE TRACE         =        THE CALL STACK
   (top = newest)                  (who called whom)

 ▲ validateUser  :14  ◀── CRASH    ┌─────────────────┐ ▲ start
 │ handleSignup  :31               │ validateUser  14│ │ looking
 │ processTicks...     (runtime,   ├─────────────────┤ │ here
 │                      ignore)    │ handleSignup  31│ │
 │                                 ├─────────────────┤ │
 └─ your code first ──────────────▶│ processTicks... │─┘ (runtime)
                                   └─────────────────┘
   read DOWN until the first line that is YOUR file

อยากได้แบบออฟไลน์?

ดาวน์โหลดหนังสือทั้งเล่มเป็น PDF หรือ EPUB — ฟรี