0Pricing
Vibe Coding · درس

تضييق نطاق الخطأ

اعزل المشكلة بمساعدة AI

تضييق نطاق الخطأ درس مجاني في Vibe Coding على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vibe Coding، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vibe Coding 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

When There's No Clear Error

Sometimes nothing crashes — the app just does the wrong thing. The button doesn't work, the total is wrong, the data never shows up. No red text to paste.

This is where real debugging begins: narrowing down where the problem actually lives. The good news? AI is an incredible partner for this — if you know how to drive the investigation.

The Core Idea: Divide and Conquer

A bug hides somewhere between your input and your output. Your job is to cut the search space in half, over and over, until you've cornered it.

Think of it like finding a broken light in a string of bulbs: you check the middle first. Is the first half fine? Then the break is in the second half. This is the single most powerful debugging mindset there is.

Your Best Friend: console.log

The simplest tool to narrow a bug is printing values at different points. Run this — the logs show you exactly what each variable holds along the way.

When the printed value isn't what you expected, you've found the rough location of the bug.

function getDiscountedPrice(price, percent) {
  console.log("input price:", price);
  console.log("input percent:", percent);
  const discount = price * percent;
  console.log("discount:", discount);
  return price - discount;
}

console.log("final:", getDiscountedPrice(100, 20));

Read the Trail

Look at the output you just saw. The final price came out negative! The logs reveal why: percent was 20, but the math expected 0.20. The discount log showed 2000 — an obvious giveaway.

That's narrowing in action: the logs pointed at the exact line where reality diverged from your expectation. You don't fix blindly — you locate, then fix.

Ask AI to Add the Logs

You don't have to place logs by hand. Ask your AI tool to instrument the code for you. This is a perfect job for Cursor, Claude Code, or Copilot.

"This function returns the wrong total and I can't tell
why. Add console.log statements at each step so I can
see how the value changes. Don't change the logic yet —
just help me see what's happening."

Comment Out to Isolate

Another narrowing trick: temporarily disable chunks of code. If you suspect a section, comment it out (or return early) and see if the problem disappears.

If the bug goes away, it lives in the part you removed. If it stays, look elsewhere. You're shrinking the haystack with every test.

function renderPage() {
  loadHeader();
  // loadSidebar();   // <- commented out to test
  loadContent();
}

// Bug gone? The problem was in loadSidebar().
// Bug still here? Look at loadHeader or loadContent.

Check Your Assumptions

Most stubborn bugs come from a wrong assumption: 'I assumed this variable held a number, but it's actually text.' Narrowing means testing those assumptions one by one.

A great AI prompt for this:

"Here's my function and what I expect each variable to
hold. Tell me which of my assumptions might be wrong,
and suggest one console.log I could add to confirm
the most likely one."

Type Confusion Is Sneaky

A super common hidden bug: a value is text when you think it's a number. Run this — the result looks crazy until you realize "5" is a string, so + glues instead of adds.

Logging the type (not just the value) instantly reveals these.

const quantity = "5"; // came from a form input as text
const price = 10;
console.log("sum looks like:", quantity + price);
console.log("type of quantity:", typeof quantity);
console.log("fixed:", Number(quantity) + price);

Narrow the Steps to Reproduce

Narrowing isn't only about code — it's about actions. Find the smallest sequence that triggers the bug.

Does it happen every time, or only with an empty field? Only on the second click? Only with certain data? Each answer shrinks the suspect list. Hand these findings to AI:

"I narrowed it down: the crash only happens when the
search box is EMPTY and I press Enter. With any text
it works fine. Given this, where should I look in
this handler function? [paste function]"

Use the Debugger for Hard Cases

For trickier bugs, browser DevTools and editors like Cursor let you set a breakpoint — the code pauses on a line so you can inspect every variable at that moment.

You don't need it for everything; console.log handles most cases. But know it exists. You can even ask AI: 'Where should I put a breakpoint to catch this?' and it'll point you to the right line.

A Narrowing Workflow

Put it together into a repeatable loop:

  • 1. Describe expected vs actual output
  • 2. Log or disable a midpoint to split the problem in half
  • 3. Check which half the bug is in
  • 4. Repeat until you've cornered the exact line
  • 5. Hand AI the narrowed location + your findings for a precise fix

This turns 'somewhere in my 500 lines' into 'this one line on line 42'.

Quick Check

Your app shows a wrong total but throws no error. What's the smartest first move to narrow it down?

Recap: You Can Corner Any Bug

You learned to debug even when there's no error to paste. Your toolkit now includes:

  • Divide and conquer — cut the search space in half repeatedly
  • console.log values and types to see reality
  • Comment out sections to isolate the culprit
  • Test your assumptions and minimize the steps to reproduce
  • Let AI add logs, suggest breakpoints, and confirm assumptions

But what if you and the AI both get stuck in a loop? That's the final lesson: when AI gets stuck.

الأسئلة الشائعة

هل درس «تضييق نطاق الخطأ» مجاني؟

نعم — نص درس «تضييق نطاق الخطأ» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vibe Coding، انتقل إلى CoddyKit PRO. تتضمن دورة Vibe Coding 4 دروس في المجموع.

ماذا ستتعلم في «تضييق نطاق الخطأ»؟

اعزل المشكلة بمساعدة AI تتمرن على Vibe Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vibe Coding؟

لا تُشترط خبرة سابقة. Vibe Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «تضييق نطاق الخطأ»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vibe Coding هذا؟

نعم. كل درس في Vibe Coding يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. فهم رسائل الخطأ
  2. لصق الأخطاء في AI بفعالية
  3. تضييق نطاق الخطأ
  4. عندما يتعثر AI
← العودة إلى Vibe Coding