با سلام به شما دوستان گرامی امیدوارم که حالتون خوب باشه. در این بخش از آموزش جاوا اسکریپت به اشکال زدایی از برنامه هایتان میپردازیم.
اشکال نرمافزاری یا 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” را انتخاب کنید.
۸۸۶