اشکال زدایی (Debugging)
اینجا درباره «اشکال زدایی جاوااسکریپت» حرف می زنیم. «اشکال زدایی (Debugging)» یعنی پیدا کردن و رفع خطا. گاهی پیام خطا نمی آید، اما کد درست کار نمی کند. پس باید سرنخ جمع کنیم.
کد دیباگینگ یعنی چه؟
کد می تواند «خطای نحوی (Syntax)» یا «منطقی (Logic)» داشته باشد. تشخیصشان سخت است. بنابراین باید مرحله ای بررسی کنیم و مقدارها را ببینیم.
ابزارهای اشکال زدایی مرورگر
همه مرورگرهای مدرن، «دیباگر (Debugger)» داخلی دارند. معمولاً با کلید F12 باز می شوند. سپس از منو «Console» را انتخاب کن و شروع کن.
نمایش مقدار با console.log()
با console.log() مقدارها را در پنجره دیباگر ببین. این ساده و سریع است.
let a = 5;
let b = 6;
let c = a + b;
console.log(c);
ایست موقت با debugger
کلیدواژه «debugger» مثل «نقطه توقف (Breakpoint)» عمل می کند. اجرا را همانجا متوقف می کند.
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
نقاط توقف (Breakpoints)
در پنجره دیباگر روی شماره خط کلیک کن. کد همانجا می ایستد. سپس مقدار متغیرها را بررسی کن و با دکمه اجرا ادامه بده.
گام های عملی
- F12 را بزن و «Console» را باز کن.
- چند console.log() در کد بگذار.
- یک «debugger» اضافه کن و اجرا را متوقف کن.
جمع بندی سریع
- F12 دیباگر را باز می کند.
- console.log سرنخ سریع می دهد.
- debugger مثل توقف دستی است.
- Breakpoints بررسی مرحله ای را ممکن می کنند.
ادامه مسیر: از شیء خطا کمک بگیر. همچنین دستورات خطا را بخوان تا مدیریت خطا کامل شود.
منابع مرتبط: JavaScript Errors، JavaScript Silent Errors، و همین صفحه JavaScript Debugging.