مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، یکی از مسائل مهمی که همیشه در برنامه نویسی با آن مواجه خواهید بود، بحث خطایابی یا خطازدایی از برنامه ها می باشد، کد برنامه نویسی ممکن است حاوی خطاهای سینتکس و یا خطاهای منطقی باشد. در اغلب رابط های کاربری زبانخطایابی در جاوا اسکریپت های مختلف ابزاری تعبیه شده که به صورت خودکار پس از بررسی خط به خط کدها، خطاهای رخ داده را پیدا کرده و به برنامه نویس اعلام می کنند، به دلیل عدم وجود چنین ابزارهایی، فرآیندی مشکل است، اغلب در زمان بروز خطا هیچ اتفاقی نیفتاده و برنامه خروجی نخواهد داشت، در ادامه این مبحث شما را با چگونگی فرآیند debugging در جاوا اسکریپت آشنا می کنیم.
خطایابی در جاوا اسکریپت
در این مبحث در ابتدا به بررسی مباحث فرآیند debugging در جاوا اسکریپت و سپس راه حل ها می پردازیم.
debugger های جاوا اسکریپت
خطایابی در جاوا اسکریپت آسان نیست اما خوشبختانه، تمام مرورگرهای مدرن دارای یک debugger ساخته شده در جاوا اسکریپت هستند.
debuggers های ساخته شده را می توان روشن یا خاموش کرد، و باعث می شود که خطاها به کاربر گزارش شوند.
با یک اشکال زدایی، می توانید نقطه های توقف (مکان هایی که اجرای کد آن می تواند متوقف شود) را تنظیم کنید.
و همچنین متغیرها را در حالی که کد اجرا می شود بررسی کنید.
همپنین می توانید، به طور معمولی این مراحل را دنبال کنید:
ابتدا با استفاده از کلید F12 اشکال زدایی را در مرورگر خود فعال کنید.
سپس “Console” را در منوی debugger انتخاب کنید.
متد ()console.log
اگر مرورگر شما از فرآیند debugging در جاوا اسکریپت پشتیبانی می کند، شما می توانید از console.log() برای نمایش مقادیر جاوا اسکریپت در پنجره ی debugger استفاده کنید.
مثال : پنجره ی debugger
| <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html> |
تنظیمات breakpoints
در پنجره ی debugger شما می توانید breakpoints را در کد JavaScript تنظیم کنید.
در هر breakpoints ، جاوا اسکریپت اجرا را متوقف می کند، و به شما اجازه می دهد مقادیر را بررسی کنید.
بعد از بررسی ها شما می توانید با فشردن دکمه play اجرای کد را ادامه دهید.
کلمه ی کلیدی debugger
کلمه ی کلیدی debugger اجرای کدهای جاوا اسکریپت را متوقف ساخته و تابع debugging را (اگر در دسترس باشد) فراخوانی می کند.
این تابع همانند تنظیم breakpoints در debugger است.
اگر debugging در دسترس نباشد، دستورات debugger اثر ندارد.
با استفاده از فعال کردن debugger ، اجرای این کد قبل از اجرای خط سوم موقف می شود:
مثال : استفاده از debugger
| var x = 15 * 5; debugger; document.getElementById("demo").innerHTML = x; |
ابزارهای بروزرسانی عمده مرورگرها
به طور معمول، F12 را در مرورگر خود فعال کنید و “Console”را در منوی debugger انتخاب نمائید.
در غیر این صورت می توانید مراحل زیر را دنبال کنید :
در مروگر Chrome
- مرورگر را باز کنید.
- از منو ، “More tools” را انتخاب کنید.
- و از ابزار، “Developer tools” را انتخاب کنید.
- سرانجام Console را انتخاب کنید.
در مرورگر Firefox
- مرورگر را باز کنید.
- از منو، “Web Developer” را انتخاب کنید.
- در نهایت، “Web Console” را انتخاب کنید.
در مرورگر Edge
- مرورگر را باز کنید.
- از منو، “Developer Tools” را انتخاب کنید.
- در نهایت، “Console” را انتخاب کنید.
در مرورگر Opera
- مرورگر را باز کنید.
- از منو، “Developer” را انتخاب کنید.
- از “Developer” گزینه ی “Developer tools” را انتخاب کنید.
- در نهایت، “Console” را انتخاب کنید.
در مرورگر Safari
به مسیر Safari > Preferences > Advanced در منوی اصلی بروید.
“Enable Show Develop menu in menu bar” را علامت بزنید.
هنگامی که گزینه جدید “توسعه” در منو ظاهر می شود:
“Show Error Console” را انتخاب کنید.
کلام آخر
خطاهای سینتکس و منطقی در تمام زبان های برنامه نویسی رخ می دهند، و معمولا هر زبانی ابزارهای لازم را برای خطایابی و خطا زدایی ارائه می دهد، جاوا اسکریپت نیز از این امر مستثنا نیست، از این رو مباحث این بخش را به بررسی چگونگی خطایابی در جاوا اسکریپت اختصاص دادیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
