درود دوستان 🤚 من امیررضا ریاحی هستم نویسنده جدید دیتی. همونطور که میدونید دیباگ کردن یکی از چالش های مشترک بین برنامه نویساست. امروز میخوایم چند تا نکته و ترفند برای دیباگ کردن برنامه های ریاکتی رو بررسی کنیم. این پست از مجموعه پستهای ریاکت ۱۰۱ هست که شامل مجموعهای از پستهای کوتاه و کاربردی ریاکتی میشه.
۱. استفاده از React Developer Tools
همونطور که میدونید این اکستنشن برای کروم و فایرفاکس در دسترس هست و با استفاده از اون میتونیم مقدار state و یا prop رو بررسی کنیم و در صورت بروز مشکل در بروزرسانی یا پاسدادن پراپ، اون رو برطرف کنیم.
برای کروم :
برای فایرفاکس :
۲. کنسول و console.log رو فراموش نکن
میتونید از دستور()console.log در قسمتهای کلیدی مثل توابع، Lifecycle متدها و هوکها برای مشاهده اطلاعات مد نظر استفاده کنین.
۳. بررسی خطاها در DevTools یا همون Inspect مرورگر
اگه برنامه ریاکتی شما درخواستی سمت سرور میفرسته و این به درستی اتفاق نمیافته، وقتشه که برین سراغ DevTools مرورگر و قسمتهای Console و Network رو چک کنید که اگر درخواست به مشکل خورد بتونین ارور رو ببینین و برطرفرش کنین.
۴. فعالسازی حالت Strict Mode ریاکت
با استفاده از <React.StrictMode> در فایل اصلی میتونین خطاهای ناخواسته رو شناسایی کنین.
۵. استفاده از ابزارهای مانیتورینگ و گزارش خطا
از ابزارهایی مثل Sentry یا LogRocket برای ثبت و مشاهده خطاهای کاربران در محیط Production میتونین استفاده کنین.
محیط Production به محیطی گفته میشه که برنامه شما در اون در حال اجراست و توسط کاربران نهایی مورد استفاده قرار میگیره. این محیط برخلاف محیطهای دیگه مثل محیط توسعه (Development) یا محیط تست (Staging) هست.
برای اطلاعات بیشتر میتونین به داکیومنت رسمی این دو ابزار مراجعه کنین.
۶. تست تغییرات State با React Profiler
ابزار Profiler در React DevTools به شما کمک میکنه تا متوجه بشن چه زمانی کامپوننت شما رندر میشه و چه مقدار زمان صرف شده.
۷. استفاده از TypeScript یا PropTypes
تایپ های صحیح داده ها رو بررسی کنین تا از بروز مشکلات ناشی از ارسال مقادیر نادرست جلوگیری بشه.
خب دوستان رسیدیم به پایان این پست و با هم چندین نکته برای دیباگ کردن برنامه های ریاکتی رو بررسی کردیم.
اگر چیزی براتون مبهم بود و یا سوالی داشتین خوشحال میشم در قسمت کامنت ها برام بنویسین تا پاسخگو باشم ☘️