قبل از نوشتن کدهای پیچیدهتر، بیاید درمورد اشکالزدایی صحبت کنیم.
اشکالزدایی فرآیند پیدا کردن و حل خطاهای درون یک اسکریپت است.
ما در اینجا از کروم استفاده میکنیم، چون دارای امکانات کافی است، اکثر مرورگرهای دیگر نیز فرآیندی مشابه دارند.
پنل «Sources»
این پنل در نسخهٔ کروم شما ممکن است کمی متفاوت به نظر برسد، اما همچنان این دستورالعمل میبایست واضح باشد.
- در کروم صفحهٔ نمونه را باز کنید.
- Developer tools را با F12 (Mac: Cmd+Opt+I) باز کنید.
- پنل
Sourcesرا انتخاب کنید.
اگر برای اولینبار این کار را میکنید، احتمالاً چنین چیزی را ببینید:
دکمهٔ مشخصشده تب همراه با فایلها را باز میکند.
بیایید آن را کلیک کنیم و index.html و سپس hello.js را در حالت درختی انتخاب کنیم. چنین چیزی باید نشان داده شود:
پنل sources سه بخش دارد:
- بخش File Navigator فایلهای اچتیامال، جاوااسکریپت، سیاساس و دیگر فایلها را، شامل عکسهای ضمیمهشده به صفحه را لیست میکند. افزونههای کروم نیز ممکن است در این بخش نشان داده شوند.
- بخش Code Editor کد منبع را نمایش میدهد.
- بخش JavaScript Debugging برای اشکالزدایی است، بهزودی آن را بررسی میکنیم.
اکنون میتوانید همان دکمه مشخصشده را دوباره کلیک کنید تا لیست منابع مخفی شود و جا برای کد باز شود.
کنسول
اگر دکمهٔ Esc را فشار دهید, یک کنسول در پایین باز میشود. ما میتوانیم دستورات را در آنجا تایپ کنیم و Enter را فشار دهیم تا اجرا شوند.
بعد از اجرای تکهکد، نتایج آن در زیر آن نمایش داده میشوند.
برای مثال، نتیجه 1+2 میشود 3، در حالی که فراخوانی تابع hello("debugger") چیزی را بر نمیگرداند، پس نتیجه undefined است:
بریکپوینتها
بیایید بررسی کنیم در کد صفحهٔ نمونه چه اتفاقی میافتد. در hello.js، روی خط شمارهٔ 4 کلیک کنید. بله، روی خود عدد 4 ، نه روی کد.
تبریک! شما یک بریکپونیت ست کردید. لطفاً روی عدد خط 8 هم کلیک کنید.
باید چنین چیزی را ببینید: (بخش آبی جاییست که باید کلیک کنید):
یک بریکپوینت نقطهای از کد است که اشکالزدا به صورت خودکار در آنجا اجرای کد جاوااسکریپت را متوقف میکند.
درحالی که اجرای کد متوقف شده است، ما میتوانیم متغیرهای فعلی را بررسی کنیم، دستوراتی را در کنسول اجرا کنیم و غیره. به عبارتی دیگر، میتوانیم آن را اشکالزدایی کنیم.
همیشه میتوانیم لیستی از بریکپوینتها را در پنل سمت راست پیدا کنیم. این پنل در زمانی که بریکپونیتهای زیادی در فایلهای مختلفی داریم، میتواند کارآمد باشد. این پنل به این امکان را میدهد تا:
- سریعاً به مکان بریکپوینت در کد بپریم. (با کلیککردن بر روی آن در پنل سمت راست).
- به صورت موقت بریکپوینت را غیرفعال کنیم با آنچک کردنش.
- بریکپوینت را با راست کلیک و انتخاب کردن گزینه Remove حذف کنیم.
- و دیگر موارد…
راست کلیک بر روی شمارهٔ خط این امکان را میدهد تا یک بریکپوینت شرطی تعریف کنیم. این بریکپوینت تنها زمانی صدازده میشود که شرط تعیینشده در هنگام ایجاد بریکپوینت درست باشد.