اشکال‌زدایی
اشکال‌زدایی یعنی پیدا کردن علت رفتار غلط. این صفحه یک سفارش دارد: { drink: "tea", size: "regular" }. تابع به‌اشتباه ویژگی cup را می‌خواند. لاگ خراب tea / undefined است. بعد از اصلاح، خط صفحه fixed / tea / regular می‌شود.
این درس کلاس نیست
صفحهٔ قبل کلاس‌های Drink و SpecialDrink را ساخت و خطش tea / regular / mint بود. آن‌جا چیزی عمداً خراب نبود.
اینجا داده از اول درست است. تابع order.cup را می‌خواند، در حالی که شیء ویژگی size دارد نه cup.
اول مقدار را ببین
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 را با یک دلیل کوتاه صدا بزن. این قطعه یک شیء بدون 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 است. رشتهٔ خالی هم نبودن حساب می‌شود، چون !"" درست است.
توقف عمدی
دستور debugger از مرورگر می‌خواهد وقتی ابزار توسعه‌دهنده باز است، اجرا را نگه دارد. اگر ابزار بسته باشد، این دستور کاری نمی‌کند و خط بعدی اجرا می‌شود.
const order = { drink: "tea", size: "regular" };
debugger;
console.log(order.size);
با ابزار باز، اجرا روی debugger می‌ایستد و می‌توانی order را ببینی. با ابزار بسته، لاگ همچنان regular است. debugger خطا نیست و order را عوض نمی‌کند.
فهرست فراخوانی
اگر label تابع format را صدا بزند و format خطا بدهد، کنسول نام هر دو تابع را فهرست می‌کند. از بالای فهرست شروع کن؛ همان خطِ شکست است. بعد به تابع صدازننده برگرد. باگ این صفحه خطا پرتاب نمی‌کند. undefined یک مقدار است، پس تا وقتی خودت لاگ نکنی فهرست ساکت می‌ماند.
فقط یک نام را عوض کن
order.cup را به order.size تغییر بده. برای خاموش کردن undefined ویژگی cup به شیء اضافه نکن. شیء از اول درست بود.
خط بعد از اصلاح
صفحه 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 خروجی تابع خراب بود.
پشت پیشخوان
- تا وقتی تابع
order.cupرا می‌خواند،label(order)را لاگ کن. لاگ tea / undefined است. - شیء
{ drink: "tea" }را بده و پیام خطا را بخوان. پیام missing size است. debuggerرا در اسکریپت بگذار. با ابزار بسته، لاگ بعدی همچنان regular است.- خط صفحه را بخوان: fixed / tea / regular.
اشتباه‌های رایج
- عوض کردن شیء فقط چون لاگ undefined است
- فرض کردن که
console.logاجرا را نگه می‌دارد - انتظار توقف صفحه از
debuggerوقتی ابزار توسعه‌دهنده بسته است - خواندن خط
tea / regular / mintاز درس کلاس - صدا زدن
console.errorو تصور اینکه خطا پرتاب می‌شود
جمع‌بندی
console.logمقدار را نشان می‌دهد و اسکریپت ادامه پیدا می‌کند- خواندن خراب
order.cupاست؛ ویژگی واقعیsizeاست console.error("missing size")شکست را مشخص می‌کند و خطا پرتاب نمی‌کندdebuggerفقط وقتی ابزار توسعه‌دهنده باز است اجرا را نگه می‌دارد- خط صفحه: fixed / tea / regular
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود