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

اشکال زدایی / Debugging

اشکال نرم‌افزاری یا bug، به خطاهای برنامه‌نویسی گفته می‌شود. به حل این مشکلات اشکال‌زدایی یا debugging می‌گویند. اشکال یاب (debugger) ابزار کمکی جهت ایجاد، آزمایش، اجرا، تغییر و خطایابی برنامه می باشد.

کد نویسی بدون کمک خطایاب امر بسیار دشواری است، بدین معنا که کدهای شما ممکن است دربردارنده ی اشکال های نحوی (مربوط به syntax)، خطاهای منطقی (logial) باشد که پیدا کردن و تشخیص آن ها می تواند بسیار ملال آور باشد.

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

بررسی یک برنامه برای یافتن خطاهای موجود در آن، debugging یا اشکال زدایی خوانده می شود.

خطایابی کار آسانی نیست، اما خشبختانه کلیه ی مرورگرهای نوین خود از یک خطایاب (debugger) توکار برخوردار می باشند.

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

به کمک خطایاب همچنین می توان نقاط انفصالی (breakpoint = جایی در کد که اجرای برنامه در آن جهت آزمایش و خطایابی متوقف می شود) در کد برنامه قرار داده و متغیرها را در حین اینکه کد اجرا می شود بررسی کرد.

به منظور فعال سازی خطایابی (debugging) در مرورگر، کافی است دکمه ی F12 را فشار داده سپس “Console” را از منو debugger انتخاب کنید.

متد console.log()

اگر مرورگر شما از قابلیت debugging پشتیبانی می کند، در آن صورت می توانید با استفاده از تابع console.log() مقادیر جاوا اسکریپت را داخل پنجره ی debugger به نمایش بگذارید.

‎
نمونه یک

a = 5;
b = 6;
c = a + b;
console.log(c);

‎

تنظیم نقطه ی انفصال (breakpoint)

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

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

پس از بررسی و آزمایش مقادیر، می توانید اجرای کد را با کلیک روی دکمه ی play از سر بگیرید.

کلیدواژه ی debugger

واژه کلیدی debugger اجرای کدهای جاوا اسکریپت را متوقف ساخته و به دنبال آن تابع خطایابی (debugging fuction) را می خواند.

در صورتی که قابلیت یا امکان debugging وجود نداشته باشد، دستور debugging نیز هیچ تاثیر و کارایی نخواهد داشت.

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

نمونه دو

var x = 15 * 5;
debugger;
document.getElementById(“demo”).innerHTML = x;

‎

ابزار اشکال زدایی مرور گرهای مطرح

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

مرورگر Chrome

ابتدا مرورگر را باز کنید.

به فهرست اصلی (منو) مرور گر مربوطه مراجعه کرده و گزینه ی tools moreرا انتخاب کنید.

از میان گزینه هایی که در اختیار شما قرار داده می شود، developer tools را انتخاب کنید.

در مرحله ی آخر، Console را انتخاب کنید.

Firefox Firebug

مرورگر را باز کنید.

حال به صفحه ی موجود در این آدرس اینترنتی مراجعه کنید: http://www.getfirebug.com

کلیه ی دستور العمل های نصب Firebug را مرحله به مرحله دنبال کنید.

Internet Explorer

مرورگر را باز کنید.

از منوی اصلی آن، ورودی tools را انتخاب کنید.

اکنون زیر منوی developer tools را انتخاب کرده سپس روی Console کلیک کنید.

Opera

پس از باز کردن مرورگر به صفحه ی وب http://dev.opera.com مراجعه کنید.

کلیه مراحل مربوط به نحوه ی افزودن دکمه ی Developer Console به نوار ابزار (toolbar) خود را دنبال کنید.

Safari Firebug

پس از راه اندازی مرورگر، به این آدرس اینترنتی مراجعه کنید. http://extensions.apple.com

دستور های مربوط به نحوه ی نصب Firebug Lite را دنبال کنید.

Safari Develop Menu

مرورگر Safari را باز کرده، به Preferences -> Advanced مراجعه کنید.

کادر “Enable Show Develop menu in menu bar” را تیک دار کنید.

پس از اینکه گزینه ی جدید “Develop” در منو پدیدار می شود: “Show Error Console” را انتخاب کنید.