آموزش اشکال زدایی و رفع باگ در جاوا اسکریپت JavaScript

اشکال زدایی در JavaScript

هر زمانی این احتمال وجود دارد که توسعه دهندگان در حین برنامه نویسی دچار اشتباه شوند. اشتباه در یک برنامه یا یک اسکریپت به عنوان یک اشکال (bug) شناخته می شود.

فرآیند یافتن و رفع اشکالات ، اشکال زدایی (debugging) نامیده می شود و بخشی از فرآیند نرمال توسعه می باشد. این بخش ، ابزار و تکنیک هایی را پوشش می دهد که می توانند به ما در انجام وظایف اشکال زدایی کمک نمایند.

پیام های خطا در IE

ساده ترین راه برای ردیابی خطاها ، فعال کردن اطلاعات خطا در مرورگر هاست. به طور پیش فرض ، Internet Explorer یک آیکن خطا را در نوار وضعیت ، وقتی که خطایی روی صفحه رخ می دهد ، نمایان می کند.

با دو بار کلیک کردن بر روی این آیکون ، ما به یک کادر محاوره ای هدایت می شویم که اطلاعات مربوط به خطای خاصی را  که رخ داده است ، نشان می دهد.

از آنجا که این آیکون به راحتی قابل نادیده گرفته شدن است ، Internet Explorer گزینه ای را در اختیار ما قرار می دهد ، تا هر زمان که خطایی رخ می دهد ، کادر محاوره ای خطا به طور خودکار نشان داده شود.

برای فعال کردن این گزینه ، منوی Tools ← Internet Options ← Advanced tab را انتخاب می کنیم. و در نهایت گزینه "Display a Notification About Every Script Error" را همان طور که در شکل زیر نشان داده شده است ، انتخاب می نماییم :

پیام های خطا در مرورگرهای Firefox یا Mozilla

سایر مرورگرها مانند Firefox ، Netscape و Mozilla ، پیام های خطا را به یک پنجره خاص به نام JavaScript Console یا Error Console ارسال می کنند. برای مشاهده کنسول ، منوی Tools ← Error console یا Web Development را انتخاب می کنیم.

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

اعلان خطاها

اعلان های خطا (error notifications) که در کنسول یا از طریق کادر محاوره ای Internet Explorer نشان داده می شوند ، نتیجه خطاهای syntax و runtime هستند. این اعلان خطاها ، شامل شماره خطی که در آن خطا اتفاق افتاده است ، می باشد.

اگر از Firefox استفاده کنیم ، می توانیم بر روی خطای موجود در کنسول خطا ، کلیک کنیم تا به خط موردنظر در اسکریپت که دارای خطا هست ، برویم.

چگونه یک اسکریپت را اشکال زدایی کنیم؟

راه های مختلفی برای اشکال زدایی یک اسکریپت در جاوا اسکریپت داریم:

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

یک روش ، برای بررسی کد جاوا اسکریپت جهت اشکالات غیرعادی این است که آن را از طریق یک برنامه اجرا کرده تا آن را بررسی کنیم و اطمینان حاصل نماییم که کدها معتبر هستند و آیا از قوانین syntax رسمی زبان پیروی می کنند یا خیر. این برنامه ها validating passers (پارسرهای اعتبارسنجی) یا به صورت اختصار اعتبار سنج ها (validator) نامگذاری می شوند و اغلب با ویراستارهای تجاری HTML و JavaScript همراه هستند.

راحت ترین اعتبارسنج برای جاوا اسکریپت Douglas Crockford's JavaScript Lint است که به صورت رایگان در لینک Douglas Crockford's JavaScript Lint در دسترس است.

به سادگی از این صفحه وب بازدید می کنیم ، کد جاوا اسکریپت (فقط جاوا اسکریپت) را در قسمت text area فراهم شده ، paste کرده و روی کلید jslint کلیک می نماییم. این برنامه ، کد جاوا اسکریپت ما را تجزیه (parse) می کند ، اطمینان حاصل می کند که همه تعاریف متغیرها و توابع از قاعده نوشتاری درستی پیروی می کنند. هم چنین دستورات جاوا اسکریپت را نیز بررسی خواهد نمود ، مانند دستورات if و while ، تا اطمینان حاصل شود که این دستورات نیز از فرمت صحیح تبعیت می کنند.

قابلیت اشکال زدایی کردن کد را به برنامه های خود اضافه کنیم

ما می توانیم از متدهای ()alert یا ()document.write  در برنامه خود برای اشکال زدایی کد خود استفاده نماییم. به عنوان مثال ، ممکن است کدی را به صورت زیر بنویسیم:

var debugging = true;
var whichImage = "widget";

if( debugging )
alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );

if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

با بررسی محتوا و ترتیب در متد ()alert همان گونه که نمایان می شوند ، ما می توانیم صحت برنامه خود را به راحتی بررسی کنیم.

استفاده از اشکال زدای جاوا اسکریپت

یک اشکال زدا ، برنامه کاربردی است که تمام جنبه های اجرای اسکریپت را تحت کنترل برنامه نویس قرار می دهد. اشکال زداها ، کنترل دقیق بر وضعیت اسکریپت را از طریق یک رابط فراهم می کنند ، که ما را قادر به بررسی ، تنظیم مقادیر و کنترل جریان اجرا می سازند.

هنگامی که یک اسکریپت در یک اشکال زدا ، بارگذاری می شود ، اسکریپت می تواند به صورت خط به خط اجرا شود یا می توان دستور داد که در نقطه ای خاصی (breakpoint) اجرا متوقف شود. پس از این که اجرا متوقف می شود ، برنامه نویس می تواند وضعیت اسکریپت و متغیرهای آن را بررسی کند تا تعیین کند که آیا چیزی اشتباه است یا خیر. هم چنین می توانیم مقدار متغیرها را تغییر داده و وضعیت برنامه را مشاهده نماییم.

آخرین نسخه Mozilla JavaScript Debugger (کد Venkman) برای هر دو مرورگر Mozilla و Netscape را می توان در http://www.hacksrus.com/~ginda/venkman دانلود کرد.

نکات مفید برای توسعه دهندگان

می توانیم نکات زیر را برای کاهش تعداد خطاهای اسکریپت خود و ساده سازی فرایند اشکال زدایی همیشه در نظر بگیریم :

• از comment های زیادی استفاده کنیم. comment ها ، ما را قادر می سازند که توضیح دهیم که چرا ما اسکریپت را به روشی که انجام می دهیم ، می نویسیم و بخش های بسیار دشوار کد را تشریح کنیم.
• همیشه از دندانه گذاری (indentation) استفاده کنیم تا خوانایی کدها راحت تر باشد. دندانه گذاری دستورات ، هم چنین باعث می شود تا ما کار تطبیق شروع و پایان تگ ها ، براکت ها و سایر عناصر HTML و اسکریپت را راحت تر انجام دهیم.
• کدهای ماژولار بنویسیم. هر جا که امکان دارد ، دستورات خود را به توابع گروه بندی کنیم. توابع به ما اجازه می دهند  که دستورات مرتبط را گروه بندی کنیم. این کار باعث می شود که تست و استفاده مجدد از بخش های کد را با حداقل تلاش انجام دهیم.
• نام گذاری متغیرها و توابع باید سازگار باشند. سعی کنیم از نام هایی استفاده کنیم که دارای معنا باشند و محتویات متغیر یا هدف تابع را توصیف کنند.
• هنگام نام گذاری متغیرها و توابع ، از قاعده نوشتاری سازگار استفاده کنیم. به عبارت دیگر ، همه نام ها را با حروف کوچک یا حروف بزرگ بنویسیم ؛ اگر قاعده نوشتاری Camel-Back را ترجیح می دهیم ، به طور سازگار از آن استفاده نماییم.
• اسکریپت های طولانی را به صورت ماژولار تست کنیم. به عبارت دیگر ، پیش از تست هر بخش از اسکریپت ، سعی نکنیم کل اسکریپت را بنویسیم. یک قطعه را نوشته و قبل از اضافه کردن قسمت بعدی ، کد آن قطعه را تست نماییم.
• از نام متغیر و تابع توصیفی استفاده کنیم و از استفاده از نام های تک کاراکتری خودداری نماییم.
• علامت نقل قول (quotation mark) های خود را کنترل کنیم. به یاد داشته باشیم که علامت نقل قول به صورت جفتی در اطراف رشته  ها استفاده می شوند و هر دو علامت نقل قول باید دارای سبک یکسانی (تکی یا دو تایی) باشند.
• نشانه های تساوی خود را کنترل کنیم. نباید از علامت تساوی تکی (=) برای اهداف مقایسه ای خود استفاده نماییم.
• متغیرها را به صورت صریح با استفاده از کلمه کلیدی var اعلام کنیم.