اشکال زدایی در جاوا اسکریپت مانند کارآگاه بودن در کد شماست. تصور کنید کد شما یک رمان اسرارآمیز است، و گاهی اوقات طرح داستان درهم می‌رود. دیباگر ذره بین شماست که به شما کمک می کند روی قسمت های مشکل زوم کنید و بفهمید چه مشکلی پیش می آید.
چرا به دیباگر نیاز داریم؟
یافتن اشکالات: باگ ها مانند گرملین های کوچکی هستند که کد شما را به هم می ریزند. دیباگر به شما کمک می کند تا آنها را در عمل دستگیر کنید.
درک جریان: این به شما امکان می دهد تا ببینید که چگونه کد شما گام به گام اجرا می شود، که می تواند بسیار روشنگر باشد.
بررسی متغیرها: می توانید مقدار متغیرها را در نقاط مختلف کد خود بررسی کنید.
چگونه می توانیم ازآن استفاده کنیم؟
مثال پایه: گرفتن دزد کوکی ها
تصور کنید در حال راه اندازی یک نانوایی هستید و یک قطعه کد برای پیگیری کوکی های خود دارید. اما به دلایلی، کوکی ها همچنان ناپدید می شوند!
function bakeCookies() {
let cookies = 10;
console.log("Cookies before thief: " + cookies);
// Mysterious cookie thief!
cookies -= 3;
console.log("Cookies after thief: " + cookies);
}
bakeCookies();
برای دستگیری دزد کوکی ها، می توانید از دیباگر استفاده کنید.
اضافه کردن اشکال زدا کلمه کلیدی:
هنگامی که این را در ابزارهای توسعه دهنده مرورگر خود اجرا می کنید (معمولاً با فشار دادن F12)، کد در اشکال زدا خط اکنون می‌توانید متغیرها را بررسی کرده و کد را مرور کنید.استفاده از ابزارهای توسعه دهنده:
- ابزار Developer Tools را باز کنید (معمولاً F12 یا روی صفحه کلیک راست کرده و “Inspect” را انتخاب کنید).
- به تب “منابع” بروید.
- کد مکث شده را در خط دیباگر خواهید دید.
- از “Step over” (F10) برای رفتن به خط بعدی استفاده کنید.
- از “Step into” (F11) برای فرو رفتن در توابع استفاده کنید.
- برای مشاهده مقادیر متغیرهای خود، بخش “Scope” را بررسی کنید.
یک مثال جالب دیگر: ربات غیر همکار
تصور کنید رباتی دارید که باید تا 5 بشمارد، اما همکاری نمی کند.
function robotCount() {
for (let i = 1; i <= 5; i++) {
debugger; // Pause and check what i is
console.log("Robot says: " + i);
}
}
robotCount();
وقتی این را اجرا می کنید، دیباگر در هر تکرار حلقه مکث می کند. می توانید تماشا کنید من افزایش دهید و ببینید آیا هرگز بد رفتار می کند.
نکاتی برای استفاده از دیباگر
- نقاط شکست: با کلیک بر روی شماره خطوط در برگه “منابع” می توانید نقاط شکست را تعیین کنید. این یک راه عالی برای توقف اجرای بدون تغییر کد با دیباگر است.
- عبارات تماشا: می توانید متغیرهایی را به پانل “Watch” اضافه کنید تا مراقب مقادیر آنها باشید.
- پشته تماس: پانل “Call Stack” را بررسی کنید تا ببینید کد شما چگونه به نقطه فعلی رسیده است.
چرا سرگرم کننده است
استفاده از دیباگر مانند شرلوک هلمز در کد خود است. شما می توانید تحقیق کنید، اسرار را کشف کنید، و اشکالات را به طور جدی تشخیص دهید. بعلاوه، وقتی که مشکلات را مرتب کردید، دیدن عملکرد عالی کد شما فوق العاده رضایت بخش است.
