Vibe Coding · บทเรียน

การส่งข้อผิดพลาดให้ปัญญาประดิษฐ์อย่างมีประสิทธิภาพ

ให้ข้อมูลที่ปัญญาประดิษฐ์ต้องใช้เพื่อแก้ไขข้อบกพร่อง

การส่งข้อผิดพลาดให้ปัญญาประดิษฐ์อย่างมีประสิทธิภาพ เป็นบทเรียน Vibe Coding ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vibe Coding และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Garbage In, Garbage Out

You found an error. Now you want AI to fix it. But here's the thing: AI is only as good as the context you give it.

Paste 'it's broken pls fix' and you'll get a guess. Paste the right details and tools like Cursor, Claude Code, or Copilot can nail the fix instantly.

This lesson teaches you exactly what the AI needs to fix a bug — and how to hand it over cleanly.

The Four Things AI Needs

For a great fix, give the AI these four ingredients:

The full error message — including the stack trace
The relevant code — the function or file the error points to
What you expected to happen
What actually happened

Miss any of these and the AI has to guess. Include them and it reasons like a senior engineer looking over your shoulder.

A Bad Prompt vs A Good Prompt

Compare these two. The first wastes everyone's time. The second gets a precise fix.

Notice the second one gives the error, the code, the expectation, and the reality — all four ingredients.

BAD:
"my app crashes fix it"

GOOD:
"I'm getting this error when I click Save:

TypeError: Cannot read properties of undefined (reading 'id')
    at saveUser (api.js:22:14)

Here's the saveUser function:
[paste the function]

Expected: the user gets saved.
Actual: it crashes on click. What's wrong and how do I fix it?"

Always Include the Full Error

Beginners often paste only the first line of an error. But the stack trace below it tells the AI which functions were involved and in what order.

Copy the whole red block — from the error type down through the at ... lines. In the browser console, right-click the error and choose 'Copy'. In a terminal, select and copy the full output.

More signal = better fix. The AI can ignore what it doesn't need.

Paste the Right Code, Not Everything

You don't need to dump your entire project. Give the AI the function the error points to, plus anything it directly touches.

If the error is in saveUser on line 22, paste saveUser. If saveUser uses a variable created in another function, paste that too.

In Cursor or Claude Code, you often don't even paste — you just @mention the file and the AI reads it. But knowing which file to point at is the skill.

Describe Expected vs Actual

This is the ingredient beginners skip most — and it's the most powerful. The AI can read your code, but it can't read your intentions.

Spell out both sides clearly:

"When I submit the form, I EXPECT the new task to
appear in the list below.

What ACTUALLY happens: the page goes blank and the
console shows the error below."

// This one sentence often points AI straight to the bug.

A Reusable Debug Prompt Template

Save this template. Fill in the blanks every time you hit a bug. It guarantees you include all four ingredients.

I'm building [what your app does].

When I [action that triggers it], I get this error:

[paste full error + stack trace]

Here's the relevant code:

[paste function / file]

Expected: [what should happen]
Actual: [what happens instead]

What's the cause, and what's the smallest fix?

Ask for the Cause, Not Just the Patch

A subtle upgrade: end your prompt by asking the AI to explain the cause, not only hand you new code.

If you only ask 'fix it', you might get code you don't understand — and the next bug stumps you again. Asking 'why did this happen?' teaches you as you go, and helps you catch when the AI's reasoning is off.

"Before you give me the fix, explain in one or two
sentences WHY this error happens. Then show the
smallest change that fixes it."

Reproduce It Yourself First

The strongest thing you can hand the AI is exact steps to reproduce. If you can say 'click Save with an empty name field → crash', the AI knows precisely what path the code took.

Try this snippet: it reproduces a real bug. Run it, copy the error it prints, and imagine pasting that plus the code into your AI tool.

function saveUser(user) {
  return "Saved user #" + user.id;
}

try {
  saveUser(undefined); // reproduce: no user passed
} catch (err) {
  console.log(err.name + ": " + err.message);
}

Watch Out for Secrets

One safety rule before you paste: never include API keys, passwords, or tokens in code you send to AI or share publicly.

If your error or code shows something like API_KEY="sk-abc123...", replace it with API_KEY="REDACTED" before pasting. The AI doesn't need the real secret to fix your logic.

Most tools are safe, but this is a good lifelong habit for any builder.

Put It All Together

Here's a fully filled-in example using the template — error, code, expected, actual, and a request for the cause. This is what a 'perfect' debug prompt looks like in practice.

Internalize this shape and AI tools will feel like they read your mind.

I'm building a to-do app.

When I click 'Add', I get:
TypeError: Cannot read properties of null (reading 'value')
    at addTask (app.js:9:30)

Code:
function addTask() {
  const text = document.getElementById('taskInput').value;
  list.push(text);
}

Expected: the typed task is added to the list.
Actual: nothing adds, console throws the error above.

Why does this happen, and what's the smallest fix?

Quick Check

Which prompt will get you the best, most accurate fix from an AI tool?

Recap: Hand AI the Right Context

You now know how to turn a vague 'it's broken' into a precise request. Remember to include:

The full error and stack trace
The relevant code (the function it points to)
Expected vs actual behavior
A request to explain the cause, and redact any secrets

Use the reusable template every time. Next lesson: when the error alone isn't enough, you'll learn to narrow down a bug with AI's help.

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

บทเรียน “การส่งข้อผิดพลาดให้ปัญญาประดิษฐ์อย่างมีประสิทธิภาพ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การส่งข้อผิดพลาดให้ปัญญาประดิษฐ์อย่างมีประสิทธิภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vibe Coding ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การส่งข้อผิดพลาดให้ปัญญาประดิษฐ์อย่างมีประสิทธิภาพ”

ให้ข้อมูลที่ปัญญาประดิษฐ์ต้องใช้เพื่อแก้ไขข้อบกพร่อง คุณปฏิบัติ Vibe Coding ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vibe Coding หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vibe Coding บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การส่งข้อผิดพลาดให้ปัญญาประดิษฐ์อย่างมีประสิทธิภาพ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vibe Coding นี้ได้ไหม

ได้ บทเรียน Vibe Coding ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การทำความเข้าใจข้อความข้อผิดพลาด
การส่งข้อผิดพลาดให้ปัญญาประดิษฐ์อย่างมีประสิทธิภาพ
การจำกัดขอบเขตจุดบกพร่อง
เมื่อปัญญาประดิษฐ์ติดขัด

← กลับไปที่ Vibe Coding