تصحيح الأخطاء
تصحيح الأخطاء يعني معرفة سبب السلوك الخاطئ. في هذه الصفحة طلب واحد { drink: "tea", size: "regular" } واسم خاصية واحد خاطئ. الـ bug يقرأ order.cup. السجل المعطوب هو tea / undefined. بعد الإصلاح يصبح سطر الصفحة fixed / tea / regular.
هذا ليس درس الصنف
الصفحة السابقة بنت Drink وSpecialDrink، وكان سطرها tea / regular / mint. لم يكن فيها عطل مقصود.
هنا البيانات صحيحة من البداية. الـ bug يقرأ order.cup، بينما الكائن يملك size وليس cup. الخاصية الحقيقية هي size.
اقرأ القيمة قبل إعادة كتابة الدالة
console.log يطبع قيمة ولا يوقف السكربت. console.warn يعلّم تحذيرًا. console.error يعلّم فشلًا. لا أحد منها يصلح البيانات؛ هي فقط تُظهر القيمة الخاطئة.
اسم الخاصية خاطئ
label تجمع order.drink وorder.cup. الخاصية drink موجودة، فالكلمة الأولى tea. الخاصية cup غير موجودة، فالكلمة الثانية undefined.
const order = { drink: "tea", size: "regular" };
function label(order) {
return order.drink + " / " + order.cup;
}
console.log(label(order));
السجل هو tea / undefined. الكائن ما زال يملك size، والدالة لم تقرأه.
علّم الفشل
عندما يغيب size، استدعِ console.error("missing size"). هذا المقطع يمرّر طلبًا بلا حجم حتى يسلك مسار الخطأ. console.error("missing size") لا يرمي استثناءً.
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
console.log(label({ drink: "tea" }));
تُظهر وحدة التحكم الخطأ missing size، والنص المُرجَع هو tea / missing size. الطلب الفارغ من size يُرجع tea / missing size. السلسلة الفارغة تُعامل كغياب أيضًا لأن !"" صحيحة.
إيقاف مقصود
جملة debugger تطلب من المتصفح أن يتوقف فقط عندما تكون أدوات المطوّر مفتوحة. إذا كانت الأدوات مغلقة، لا تفعل الجملة شيئًا ويُنفَّذ السطر التالي.
const order = { drink: "tea", size: "regular" };
debugger;
console.log(order.size);
مع الأدوات المفتوحة يتوقف التنفيذ عند debugger ويمكنك فحص order. مع الأدوات المغلقة يكون السجل التالي regular. debugger ليس خطأً ولا يغيّر order.
قائمة الاستدعاء
إذا استدعت label الدالة format ورمى format استثناءً، تعرض وحدة التحكم اسم الدالتين. ابدأ من أعلى القائمة؛ ذلك هو السطر الذي فشل. ثم ارجع إلى المستدعي. الـ bug في هذه الصفحة لا يرمي شيئًا. undefined قيمة، فتبقى القائمة صامتة حتى تسجّلها أنت.
غيّر اسمًا واحدًا
استبدل order.cup بـ order.size. لا تضف خاصية cup فقط لإسكات undefined. الكائن كان صحيحًا من الأصل، والخاصية الحقيقية هي size.
السطر بعد الإصلاح
تقرأ الصفحة size، تتحقق منه، وتكتب حالة قصيرة قبل التسمية.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { drink: "tea", size: "regular" };
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
document.getElementById("line").textContent = "fixed / " + label(order);
</script>
</body>
</html>
يقرأ السطر fixed / tea / regular. كلمة fixed حالة فقط. اسم المشروب والحجم يأتيان من الكائن. tea / undefined كان ناتج الدالة المعطوبة.
عند المنضدة
- سجّل
label(order)وهي تقرأorder.cup. السجل tea / undefined. - مرّر
{ drink: "tea" }واقرأ الخطأ. النص المُرجَع tea / missing size. - اترك
debuggerفي السكربت. مع الأدوات المغلقة، السجل التالي ما زال regular. - اقرأ سطر الصفحة: fixed / tea / regular.
أخطاء شائعة
- تغيير الكائن لأن السجل يقول undefined
- معاملة
console.logكإيقاف؛console.logلا يوقف السكربت - توقع أن يوقف
debuggerالصفحة وأدوات المطوّر مغلقة - قراءة
tea / regular / mintمن صفحة الصنف - استدعاء
console.error("missing size")وظن أنه يرمي استثناءً
احتفظ بهذا
console.logيُظهر قيمة ويستمر السكربت؛ لا يوقف السكربت- القراءة المعطوبة هي
order.cup؛ الخاصية الحقيقيةsize console.error("missing size")يعلّم الفشل ولا يرمي استثناءًdebuggerيتوقف فقط وأدوات المطوّر مفتوحة- سطر الصفحة يقرأ fixed / tea / regular
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى