رفع خطای جاوا اسکریپت و ترفندهای تشخیص خطا

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

به وجود آمدن خطا دلایل مختلفی دارد. در نتیجه خطاها در دسته بندی‌های مختلفی قرار می‌گیرند.

دو نوع از خطاهایی که ممکن است بیشتر با آن مواجه شویم عبارتند از:

• خطای نحوی

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

• خطای منطقی

گاهی اوقات ساختار کد درست است، اما برنامه ما به درستی انجام نمی‌شود. یعنی برنامه بدون خطا اجرا شده، اما خروجی با نتیجه‌ی مورد انتظار برابر نیست! برای رفع خطاهای منطقی می‌بایست منطق برنامه را بررسی کرد تا ایراد کار را متوجه شویم.

• خطای زمان اجرا

این نوع خطا در هنگام کامپایل کد مشخص نمی‌شوند. بلکه در هنگام اجرای برنامه بعضاً باعث ایجاد مشکل در اجرا خواهند شد.

برای آشنایی بیشتر با خطای زمان اجرا و مدیریت خطا در جاوا اسکریپت می‌توانید به این صفحه مراجعه کنید.

 

همان گونه که گفته شده، رفع خطای نحوی با توجه به پیغام خطایی که نمایش داده می‌شود، کار ساده تری است. در ادامه روش‌هایی را خواهید آموخت که برسی منطق برنامه را برایتان آسان‌تر می‌کند.

 

متد console.log برای رفع خطای جاوا اسکریپت

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

اولین راه حلی که برای چاپ مقدار متغیر به نظر می‌رسد استفاده از تابع alert() است. اگر متغیری به اسم x را زیر نظر داشته باشیم، با استفاده از کد زیر در هر جایی از برنامه، خواهیم توانست مقدار آن‌را بررسی کنیم.

alert(x);

 

اما این کار کمی غیر حرفه‌ای است! اگر تعداد محل های مورد بررسی یا تعداد متغیرها زیاد باشند، اجرای یک پیغام به ازای هر کدام از آن‌ها کاری غیر منطقی است.

در زبان جاوا اسکریپت یک شئ به نام console در اختیار داریم. این شئ یک متد با نام log() دارد. هر چیزی که به عنوان ورودی به آن داده شود را در کنسول مرورگر چاپ می‌کند.

کنسول یکی از تب‌های ابزار Developer Tools مرورگر است. و یا می‌توان با فشردن کلید F12 این ابزار را باز کرده و به تب console رفت.

x = 16
console.log(x);

txt = "Test Text!" 
console.log(txt);

 

نحوه دسترسی به ابزار Developer Tools در مرورگرهای مختلف را می‌توانید در پایان این صفحه ببینید.

اگر دیتای متغیر به صورت شئ یا آرایه ای از اشیاء باشد، ترفندی برای چاپ آرایه به صورت یک جا وجود دارد که در آخرین بخش مقاله به آن خواهیم پرداخت.

 

استفاده از Debugger برای عیب یابی کد جاوا اسکریپت

دیباگر برنامه ای است که با استفاده از آن می‌توان برنامه را خط به خط اجرا کرد. در هر مرحله مقدار ذخیره شده در متغیرها را بررسی کرد. به کمک این کار، خط به خط با منطق برنامه پیش خواهیم رفت. و در نهایت محلی که باعث مشکل می‌شود را پیدا می‌کنیم.

از آن جا که زبان جاوا اسکریپت سمت کاربر و در مرورگر کاربر اجرا می‌شود، بر روی اکثر مرورگرهای به روز دیباگرهایی برای رفع خطای برنامه نویسی وجود دارد.

اگر بخواهیم برنامه ما تا قسمتی اجرا شود و سپس Debugger مروگر برای بررسی کد اجرا شود، می‌توان از کلمه کلیدی debugger در خط مورد نظر استفاده کرد.

var x = 3;
var y = 6; 
debugger; 
alert( x * y );

وقتی کد به خط سوم برنامه برسد، دیباگر مرورگر باز شده و خواهیم توانست ادامه کد را خط به خط اجرا نماییم.

 

افزودن breakpoint در کد جاوا اسکریپت

در Debugger می‌توان خط هایی را به عنوان نطقه شکست (breakpoint) تعریف کرد. هنگامی که اجرای برنامه به این خط رسید، اجرا متوقف (pause) خواهد شد. در نتیجه می‌توان وضعیت برنامه و مقدار متغییرها را بررسی کرد.

استفاده از امکان breakpoint با توجه به محیط اجرای شما ممکن است متفاوت باشد. در این جا به آموزش دیباگ جاوا اسکریپت در مرورگر پایه وب‌کیت (کروم و فایرفاکس) می‌پردازیم. در سایر مرورگرها نیز روند کار بسیار مشابه خواهد بود.

مراحل انجام کار به صورت زیر خواهد بود:

1. در صفحه برنامه خود، کلید F12 را بزنید.
2. در پنجره باز شده، تب source را انتخاب کنید.
3. از مسیر نمایش داده شده، فایلی که حاوی کدهای جاوا اسکریپت است را باز کنید.
4. با کلیک بر روی شماره خط، شماره خط برجسته و آبی خواهد شد. اکنون یک breakpoint ثبت شده داریم.
5. می‌توان چندین نقطه شکست برای برنامه تعریف کرد.
6. حال صفحه را refresh می‌کنیم.

خواهید دید که اجرای برنامه در اولین خط مشخص شده متوقف می‌شود.

از بخش scope می‌توان مقدار متغیرهای تعریف شده را مشاهده و بررسی کنیم.

 

مثال دیباگ جاوا اسکریپت

برای مثال کد بسیار ساده زیر را نوشته‌ایم. یک حلقه تو در تو برای محاسبه مقدار نهایی متغیر k.

<!doctype html>
<html dir="rtl" lang="fa-IR">
<head>
</head>
<body>

<script>

var k = 0;

for( var i=1; i<5;i++ ){
    
	for( var j=0; j<5;j++ ){
	    k = k+1;
	}
	k = k*2
}
document.write(k);

</script>

</body>
</html>

خط 16 از کد را مشخص کرده و سپس دو مرحله از برنامه را اجرا می‌کنیم.

همانطور که در سمت راست تصویر مشخص است، مقادیر متغیرهای i و j و k به ما نشان داده شده است.

 

ترفندهای رفع خطای جاوا اسکریپت

ترفندهایی در استفاده از اشیاء و توابع مختلف برای رفع خطای جاوا اسکریپت وجود دارد. ممکن است گاهی اوقات به ما برای عیب یابی حرفه ای کمک کنند.

سه مورد از این ترفندها عبارتند از:

• چاپ آرایه ها به صورت جدول
• محاسبه زمان اجرای یک قطعه کد
• ردیابی اجرای تابع (trace کردن تابع)

 

چاپ منظم آرایه در کنسول جاوا اسکریپت

اگر متغیری به صورت آرایه‌ای از اشیاء را بخواهیم در کنسول چاپ کنیم، می‌توان از تابع table در شئ console استفاده کرد.

خروجی این تابع یک جدول منظم از اطلاعات ذخیره شده در آرایه در قسمت console خواهد بود.

مقلاً فرض کنید متغیر آرایه‌ای شبیه زیر داریم:

var persons = [
    { name: 'Omid', age: 22, city: 'Shiraz' },
    { name: 'Ehsan', age: 17, city: 'Tabriz' },
    { name: 'Nazanin', age: 19, city: 'Tehran' },
];

console.table(persons);

نتیجه اجرای console.table(persons) چیزی شبیه زیر در console خواهد بود!

 

محاسبه زمان اجرای کد js

گاهی اوقات نیاز داریم زمان حدودی اجرای یک تکه کد را بدانیم. هر چند زمان اجرا به پارامترهای مختلفی بستگی دارد، اما با چندین بار اجرا، می‌توان یک معیار حدودی به دست آورد.

برای این کار از تابع console.time() و console.timeEnd() استفاده کرد.

این دو تابع یک مقدار ورودی رشته‌ای دریافت می‌کنند که برچسبی برای شناسایی تایمر است. پس می‌توان در یک برنامه چندین تایمر مختلف به کار برد.

console.time('myTimer');

var items = [];

for( var i = 0; i < 8000; i++ ){
    items.push( {index: i} );
}

console.timeEnd('myTimer');

// OUTPUT:
// myTimer: 5.111328125ms

 

ردیابی اجرای تابع یا trace کردن در جاوا اسکریپت

گاهی نیاز است ترتیب اجرای توابع تو در تو را بررسی کنیم. به این کار trace کردن کد گفته می‌شود.

برای trace کردن یک تابع از متد console.trace() استفاده می‌شود.

ورودی این متد یک رشته است که مشخص کننده نام تابع مورد نظر ماست.

نحوه استفاده آن به شکل زیر است:

console.trace("testFunction");

 

جمع بندی: آموزش رفع خطا در جاوا اسکریپت

در ابن مقاله به آموزش رفع خطای جاوا اسکریپت پرداختیم. فهمیدیم خطاها انواع مختلفی دارند و با دو نوع از آنها مختصراً آشنا شدیم.

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

در پروژه های کوچک معمولا با چاپ مقادیر متغیرها به کمک شئ console می‌توان مشکل را برطرف کرد.