خطایابی (Debugging) در انگولار

19 تیر 1396
angular-debugging

با مطالعه‌ی فصل های گذشته مفاهیم ابتدایی و اولیه‌ی فریم ورک قدرتمند انگولار را فرا گرفتید و کلیاتی از نحوه‌ی اجرا و نصب این فریم‌ورک به همراه کار کردن با کامپوننت‌ها و در نهایت دستورها (Directive) ارائه گردید. حال در این فصل قصد داریم کمی از فضای آموزشی انگولار دور شده و به مبحثی تحت عنوان خطایابی یا Debugging نرم‌افزارهای انگولاری بپردازیم. با ما همراه باشید.

خطایابی یا Debugging چیست؟

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

فریم‌ورک قدرتمند انگولار به دلیل فراگیر شدن دارای افزونه‌ها و ابزارهای مناسبی‌ست که به شما این امکان را می‌دهد تا در هر لحظه برنامه‌ی خود را خطایابی کنید.

خطایابی با استفاده از افزونه مروگر کروم یا موزیلا

هنگامی آدرس http://localhost:4200 را وارد کنید صفحه نرم افزاری که در حال اجرا و پیاده‌سازی آن هستید برای شما نمایان می‌شود. در حالت عادی ممکن است هیچ خطایی برای شما نمایش داده نشود. بنابراین باید یک ابزار توسعه در اختیار داشته باشید که گوگل کروم و موزیلا که جزو مرورگرهای محبوب برنامه‌نویسان هستند از این ابزار به قدرت هرچه تمام تر پشتیبانی می‌کنند.

بنابراین جهت فعال‌سازی این ابزار به اختصار دکمه‌ی F12 را بفشارید

زبانه Console

با فشردن دکمه‌ی F12 ابزاری جهت تست خطاهای نرم‌افزار شما در اختیار قرار می‌گیرد. در صورتیکه این کار را به درستی انجام داده باشید پیام زیر برای شما نمایش داده می‌شود:

استفاده از ابزار Console برای خطایابی انگولار

همچنین اگر تحت هر شرایطی خطا داشته باشید قسمت Console تک تک آنها را برای شما بازگو می‌کند.

بنابراین یکی از مفید‌ترین ابزارها برای خطایابی استفاده از Console در مرورگرهاست. نمونه‌ی تصویر زیر یک سری خطا را که بر اثر نگارش کد ایجاد شده را برای شما به تصویر کشیده است:

رفع خطاهای انگولار با استفاه از ابزار توسعه

برای برطرف کردن خطاها ابتدا نام فایلی که در آن خطا ایجاد شده است و سپس در بخش inline-template شماره خطی که خطا دارد و در نهایت در قسمت انتهایی متن پیام خطا در اختیار شما قرار می‌گیرد.

زبانه‌ی Source

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

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

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

ابتدا روی زبانه Source کلیک کنید تا صفحه‌ای مشابه تصویر زیر برای شما نمایش داده شود.

تست کردن برنامه با ابزار توسعه کروم

سپس روی دکمه‌ی pause (توقف) که با رنگ نارنجی در تصویر مشخص شده است کلیک کنید. در نهایت صفحه‌ی شما به حالت pause تبدیل می‌شود.

در مرحله‌ی بعد فایل main.bundle.js را انتخاب کرده و در بین خطوط آن جستجو کنید تا کد کامپوننت موردنظر را در آن ملاحظه کنید.

در نهایت روی عدد کناری که نمایانگر شماره خط کد است کلیک کنید تا break point یا نقطه‌ی اجرای برنامه مشخص شود. سپس روی دکمه‌ی pause مجددا کلیک کرده تا برنامه اجرا شود.

همانطور که مشاهده می‌کنید روبه‌روی هر عبارت در کنار نقطه‌ی break point مقادیر را به شما نمایش می‌دهد.

توجه داشته باشید که با کلیک روی متن کد مربوط به کامپوننت موردنظر، می‌توانید در صفحه ای جداگانه و با فایلی با پسوند ts کار کنید. این یک ابزار استثنایی است که شما می‌توانید در بین مجموعه‌ای از کدها تنها کامپوننت موردنظر خود را مورد بررسی قرار دهید.

یکی دیگر از راه‌های دسترسی مستقیم به کامپوننت‌ها و فایل‌های تایپ اسکریپت ورود به مسیر موجود در پوشه‌ی webpack‌ است که در تصویر زیر با کادر نارنجی مشخص شده است.

دسترسی به کامپوننت ها در ابزار توسعه کروم

خطایابی با استفاده از ابزار Augury

نصب ابزار augury

ابزار Augury به عنوان یکی از حرفه‌ای‌ترین ابزارهای خطایابی انگولار بحساب می‌آید که توسط خود کمپانی گوگل برای مرورگر Chrome تولید و به صورت رایگان در اختیار برنامه‌نویسان گرامی قرار گرفته است. جهت نصب این ابزار روی مرورگر خود ابتدا به لینک زیر مراجعه و سپس روی گزینه install کلیک کنید. در ادامه مرورگر خود را بسته و مجددا اجرا کنید.

دانلود ابزار توسعه Augury

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

برای استفاده از این ابزار باید مجددا دکمه‌ی F12 را بفشارید و سپس روی زبانه‌ی Augury کلیک بفرمایید. در نهایت با صفحه‌ای روبه‌رو خواهید شد که اطلاعات کلی پروژه اعم از: گراف رابطه کامپونت‌ها، ویژگی‌ها، متغییرها و ... را در اختیار شما می‌گذارد.

فعال کردن ابزار توسعه augury انگولار در مرورگر کروم

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

توجه: دوستان عزیز آموزش ویدیویی انگولار 6 از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید.

دوره آموزش انگولار به زبان فارسی + پروژه ساخت فروشگاه اینترنتی

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

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سجاد افضلی یزدی
06 اردیبهشت 1397
آموزش ها واقعا مفید هستن خسته نباشید عرض میکنم. امیدوارم شاهد پیشرفت روزافزون وب سایتتون باشیم.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.