تکنیک‌های دیباگ

مقدمه

دیباگ کردن (Debugging) فرآیند نظام‌مند پیدا کردن و رفع کردن باگ‌ها (نقص‌ها) در کد است. هر برنامه‌نویسی، صرف نظر از سطح مهارت، با باگ‌ها مواجه می‌شود. در حالی که استفاده از console.log برای چاپ کردن مقادیر متغیرها یک نقطه شروع خوب است، اما برای مشکلات پیچیده یک روش ناکارآمد محسوب می‌شود. ابزارهای توسعه‌دهنده مرورگر (Browser Developer Tools یا DevTools) مجموعه‌ای از ابزارهای قدرتمند را برای دیباگ حرفه‌ای کدهای جاوااسکریپت در اختیار ما قرار می‌دهند.

فراتر از console.log

شیء سراسری console بسیار قدرتمندتر از متد log آن است. استفاده از متدهای مناسب می‌تواند خوانایی خروجی‌های دیباگ شما را به شدت افزایش دهد.

• console.warn() و console.error(): برای نمایش هشدارها و خطاها با استایل مشخص در کنسول.
• console.table(data): برای نمایش داده‌های آرایه‌ای یا شیء به صورت یک جدول زیبا و خوانا.
• console.group(label) و console.groupEnd(): برای گروه‌بندی پیام‌های مرتبط در کنسول به صورت تودرتو و قابل جمع شدن.

JAVASCRIPT

const users = [
    { id: 1, name: 'Alice', role: 'admin' },
    { id: 2, name: 'Bob', role: 'user' }
];
console.table(users);

console.group('User Processing');
console.log('Processing user 1...');
console.warn('User 1 has admin privileges.');
console.groupEnd();

استفاده از console.table() برای بررسی آرایه‌ای از اشیاء بسیار مفید است و console.group() به شما کمک می‌کند تا لاگ‌های مربوط به بخش‌های مختلف کد را از هم جدا کنید.

دیباگر تعاملی در پنل Sources

قدرتمندترین ابزار برای دیباگ، پنل Sources در DevTools است. این ابزار به ما اجازه می‌دهد تا اجرای کد جاوااسکریپت را در هر نقطه‌ای که بخواهیم متوقف کرده، وضعیت تمام متغیرها را در آن لحظه بررسی کنیم و اجرای کد را به صورت خط به خط ادامه دهیم.

نقطه‌ی توقف (Breakpoints)

یک «نقطه‌ی توقف» یا Breakpoint یک نشانگر است که شما روی یک خط خاص از کدتان قرار می‌دهید. وقتی مرورگر در حین اجرای کد به آن خط برسد، اجرا را متوقف (pause) می‌کند و کنترل را به شما می‌دهد. برای قرار دادن یک breakpoint، کافیست در پنل Sources روی شماره خط مورد نظر کلیک کنید.

پیمایش کد (Stepping Through)

پس از توقف اجرا در یک breakpoint، چندین گزینه برای ادامه دادن در اختیار شما قرار می‌گیرد:

• Resume execution: ادامه اجرای عادی کد تا رسیدن به breakpoint بعدی.
• Step over next function call: اجرای خط فعلی و رفتن به خط بعدی در همان تابع. اگر خط فعلی یک فراخوانی تابع باشد، این گزینه وارد آن تابع نمی‌شود.
• Step into next function call: اگر خط فعلی یک فراخوانی تابع باشد، وارد آن تابع شده و اجرای کد را از اولین خط آن تابع ادامه می‌دهد.
• Step out of current function: باقی‌مانده تابع فعلی را اجرا کرده و از آن خارج می‌شود و در خطی که تابع از آنجا فراخوانی شده بود، دوباره متوقف می‌شود.

بررسی متغیرها (Scope و Watch)

هنگامی که اجرا متوقف شده است، پنل Scope تمام متغیرهایی که در آن لحظه در دسترس هستند (شامل متغیرهای محلی، closure و سراسری) را به همراه مقادیرشان نمایش می‌دهد. همچنین، می‌توانید در پنل Watch، متغیرها یا عبارت‌های دلخواه خود را اضافه کنید تا مقدار آنها را به صورت مداوم حین پیمایش کد مشاهده کنید.

دستور debugger

علاوه بر قرار دادن دستی breakpointها، می‌توانیم با نوشتن دستور debugger; در هر جای کد، یک نقطه‌ی توقف برنامه‌نویسی شده ایجاد کنیم. زمانی که مرورگر به این دستور برسد و DevTools باز باشد، اجرای کد به صورت خودکار متوقف خواهد شد. این روش برای دیباگ کردن کدهایی که به سرعت اجرا می‌شوند یا در شرایط خاصی رخ می‌دهند، بسیار مفید است.

JAVASCRIPT

function processData(data) {
    for (const item of data) {
        if (!item.id) {
            // Something is wrong with the data, let's pause here.
            debugger;
        }
        // ... more processing ...
    }
}

در این مثال، اگر تابعی با داده‌ای که فاقد id است فراخوانی شود، اجرای کد دقیقاً قبل از بروز خطا متوقف شده و به ما اجازه می‌دهد تا متغیرهای data و item را بررسی کرده و منشأ مشکل را پیدا کنیم.

در این درس با تکنیک‌های اساسی دیباگ در جاوااسکریپت، از متدهای پیشرفته کنسول گرفته تا قدرت دیباگر تعاملی و نقطه‌های توقف، آشنا شدیم. با این درس، فصل «مدیریت خطا و دیباگ کدها» به پایان می‌رسد. ما در این فصل یاد گرفتیم که چگونه خطاها را مدیریت کنیم، چه استراتژی‌هایی برای آنها داشته باشیم، و چگونه باگ‌ها را پیدا و رفع کنیم. این مهارت‌ها برای نوشتن کدهای پایدار و قابل نگهداری ضروری هستند. در فصل بعدی، به بررسی نحوه تعامل وب‌سایت‌ها با سرورها و دریافت داده از منابع خارجی خواهیم پرداخت.