آموزش جاوا اسکریپت - اشکال زدایی

گاهی اوقات، توسعه دهندگان در حین کد نویسی اشتباهاتی انجام می‌دهند. یک اشتباه در برنامه یا اسکریپت باگ (bug) نامیده می‌شود.

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

پیام‌های خطا در مرورگر اینترنت اکسپلورر (IE)

ساده‌ترین راه برای پیدا کردن خطاها، فعال‌سازی اطلاعات خطا در مرورگر شما است. به طور پیش فرض، اینترنت اکسپلورر (IE) هنگامی که در صفحه خطایی رخ داده باشد، یک آیکون خطا را در نوار وضعیت نشان می‌دهد.

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

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

برای فعال سازی این گزینه، گزینه "نمایش هشدار درباره هر خطا در اسکریپت" را انتخاب کنید، این گزینه در قسمت پیشرفته بخش ابزارها → گزینه های اینترنت قابل دسترسی است که در تصویر زیر نشان داده شده است:

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

مرورگر های دیگر مانند Firefox، Netscape و Mozilla پیام های خطا را به یک پنجره ویژه با نام کنسول جاوااسکریپت یا کنسول خطا ارسال می کنند. برای مشاهده کنسول، گزینه ابزارها → کنسول خطا یا توسعه وب را انتخاب کنید.

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

اعلان خطاها

اعلان خطاهایی که در کنسول یا باکس های دیالوگ اینترنت اکسپلورر نمایش داده می شوند، نتیجه خطاهای دستوری (syntax) و اجرایی (runtime) می باشند. این اعلان های خطا شامل شماره خطی هستند که در آن خط خطایی رخ داده است.

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

رفع اشکال یک اسکریپت

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

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

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

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

به سادگی به آن صفحه وب سر بزنید، کد جاوااسکریپت خود را (فقط جاوااسکریپت) در محل متن فراهم شده قرار دهید و بر روی دکمه jslint کلیک کنید. این برنامه به کد جاوااسکریپت شما نگاه خواهد کرد و اطمینان حاصل خواهد کرد که تمامی تعاریف متغیرها و توابع دارای قالب درست باشند. همچنین از بیانیه‌های جاوااسکریپت، مانند 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() می‌توان به راحتی وضعیت برنامه خود را بررسی کرد.

استفاده از ابزار اشکال‌زدایی جاوااسکریپت (JavaScript Debugger)

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

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

جدیدترین نسخه ابزار اشکال‌زدایی جاوااسکریپت برای مرورگرهای Mozilla و Netscape با نام کد Venkman می‌تواند از آدرس http://www.hacksrus.com/~ginda/venkman دریافت شود.

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

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

• استفاده از نظرات (comments) بسیار مفید است. نظرات به شما کمک می‌کنند که بیان کنید چرا اسکریپت را به این شکل نوشته‌اید و بخصوص بخش‌های دشوار را توضیح دهید.

• همیشه از تورفتگی (indentation) استفاده کنید تا کد شما راحت‌تر قابل خواندن باشد. تورفتگی در دستورات همچنین باعث می‌شود که شما به راحتی تگ‌های شروع و پایان، پرانتز مربوط به HTML و عناصر اسکریپت را با هم مطابقت دهید.

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

• در نام‌گذاری متغیرها و توابع خود همیشه منظم باشید. سعی کنید نام‌هایی را انتخاب کنید که به میزان کافی طولانی باشند تا مفهوم محتوای متغیر یا هدف تابع را بیان کنند.

• هنگامی که نام‌های متغیرها و توابع را می‌سازید، از یک ساختار دستوری ثابت استفاده کنید. به عبارت دیگر، همه آن‌ها را با حروف کوچک یا بزرگ نگه دارید؛ اگر شما ترجیح می‌دهید از نماد Camel-Back استفاده کنید، باید به ثبات آن رعایت کنید.

• برای آزمایش اسکریپت های بلند از روش ماژولار استفاده کنید. به عبارت دیگر، قبل از نوشتن کل اسکریپت، هر قسمت از آن را بنویسید و پس از کارکردن به درستی، بخش بعدی کد را اضافه کنید.

• از نام های متغیر و تابع وصفی استفاده کنید و از استفاده از نام های یک حرفی (single-character names) خودداری کنید.

• از نقل قول های گیومه ایت نظارت داشته باشید. به خاطر داشته باشید که نقل قول ها در کنار رشته ها استفاده می شوند و هر دو نقل قول باید از همان نوع باشند (یا تکی یا دوتایی).

• از علامت مساوی های خودداری کنید. برای مقایسه دو مقدار از علامت مساوی دوتایی (==) یا سه تایی (===) استفاده کنید.

• متغیر ها را با استفاده از کلمه کلیدی var به صورت صریح تعریف کنید.