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

از ویکی کد

-

(تفاوت) → نسخهٔ قدیمی‌تر | نمایش نسخهٔ فعلی (تفاوت) | نسخهٔ جدیدتر ← (تفاوت)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

خطاها می‌توانند هر دفعه ای که شما کد کامپیوتری جدیدی می‌نویسید (اتفاق بیفتند).

اشکال زدایی کد

کدهای برنامه‌نویسی ممکن است شامل خطاهای نوشتاری (به انگلیسی: syntax error) یا خطاهای منطقی باشند. [۱]

شناسایی و پیدا کردن بسیاری از این خطاها بسیار سخت است.

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

جستجو برای یافتن خطاها (و رفع آن‌ها) را در برنامه‌نویسی اشکال‌زدایی (به انگلیسی: Debugging) می‌گویند.

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

عمل اشکال‌زدایی عمل ساده ای نیست. اما خوشبختانه، تمامی مرورگرهای مدرن دارای اشکال زدا (به انگلیسی: debugger) برای جاوا اسکریپت به صورت پیشفرض هستند.

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

با اشکال زداها، شما می‌توانید نقطه توقف اجرا (به انگلیسی: breakpoint) (جایی که اجرای کد می‌تواند متوقف شود)، و مقدار متغیرها را در طول اجرای کد بررسی کنید.

به صورت عادی، اگر شما مراحلی را که در پایان این صفحه قرار گرفته طی کنید، شما اشکال‌زدایی را در مرورگر خود با کلید F12 و انتخاب بخش "Console" در منوی debugger فعال می‌کنید.

متد console.log()

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

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <h1>My First Web Page</h1>
 6 
 7 <script>
 8 a = 5;
 9 b = 6;
10 c = a + b;
11 console.log(c);
12 </script>
13 
14 </body>
15 </html>

مشاهدهٔ نتیجه

نکته: شما می‌توانید مطالب بیشتری را در مورد متد console.log()در فصل JavaScript:مرجع Console در جاوا اسکریپت بخوانید.

تعیین نقطه های توقف اجرا (به انگلیسی: Breakpoints)

در پنجره debugger شما می‌توانید نقطه توقف اجرا یا breakpoint برای کد جاوا اسکریپتی خود تعیین کنید.

در هر breakpoint جاوا اسکریپت اجرای کد را متوقف خواهد کرد و به شما اجازه خواهد داد که مقادیر جاوا اسکریپت را در هر مرحله از اجرا ببینید.

بعد از بررسی مقادیر، شما می‌توانید اجرای خود را از سر بگیرید (تنها با زدن کلیک play)

کلمه کلیدی debugger

کلمه کلیدی debuggerاجرای کد جاوا اسکریپت را متوقف می‌سازد و (در صورت وجود) متد اشکال‌زدایی را فراخوانی می‌کند.

این کلمه کلیدی تابعی مشابه آنچه در debugger تحت عنوان تنظیم کردن نقطه توقف اجرا وجود دارد، دارد.

اگر اشکال‌زدایی فعال نباشد، عبارت debugger هیچ اثری ندارد.

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

مثال

1 var x = 15 * 5;
2 debugger;
3 document.getElementById("demo").innerHTML = x;

مشاهدهٔ نتیجه


معرفی ابزار اشکال زدایی مرورگرها

به صورت عادی، شما اشکال‌زدایی را از طریق فشردن کلید F12 و انتخاب "Console" در منوی debugger فعال می‌کنید.

با اینحال مراحل زیرا نیز می‌توانید دنبال کنید:

مرورگر کروم

  • مرورگر را باز کنید
  • از قسمت منو، گزینهٔ “More tools” را انتخاب کنید
  • از قسمت Tools، گزینه “Developer tools” را انتخاب کنید
  • در نهایت گزینه Console را انتخاب کنید

مرورگر فایرفاکس

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

  • از قسمت منو، گزینهٔ Web developer را انتخاب کنید
  • در نهایت گزینه “Web console” را انتخاب کنید

مرورگر Edge

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

  • از قسمت منو، گزینهٔ “Developer Tools” را انتخاب کنید
  • در نهایت گزینه “Console” را انتخاب کنید

مرورگر Opera

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

  • از قسمت menu، گزینه “Developer”را انتخاب کنید
  • از قسمت “Developer”، گزینه “Developer tools” را انتخاب کنید
  • در نهایت گزینه “Console ”را انتخاب کنید

مرورگر سافاری

  • در منوی اصلی، به قسمت Safari، قسمت Preferences و سپس قسمت Advanced بروید
  • تیک گزینه "Enable Show Develop menu in menu bar" را بزنید
  • زمانی که گزینه جدید "Develop" در منو ظاهر شد: گزینه “Show Error Console” را انتخاب کنید

آیا می‌دانستید؟

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

اولین باگ شناخته شده کامیپوتر یک باگ واقعی (یک حشره) بود که در قطعات الکترونیکی گیر کرده بود.


منابع آموزشی