افزونه رسمی React Developer Tools قدرتمندترین ابزار برای بررسی ساختار کامپوننت‌ها، ویرایش زنده ویژگی‌ها (props) و وضعیت‌ها (state) و همچنین شناسایی و حل مشکلات افت سرعت (Performance) در برنامه‌های راکت است.
ساده‌ترین و سریع‌ترین راه برای خطایابی وب‌سایت‌های ساخته شده با React، نصب افزونه اختصاصی آن روی مرورگر است. این افزونه برای مرورگرهای محبوب زیر در دسترس است:
نصب برای مرورگر Chrome (از طریق Chrome Web Store)
نصب برای مرورگر Firefox (از طریق Firefox Add-ons)
نصب برای مرورگر Edge (از طریق Microsoft Edge Add-ons)
پس از نصب، هر زمان که وارد یک وب‌سایت ساخته شده با React شوید و ابزار Inspect مرورگر (کلید F12) را باز کنید، دو تب پیشرفته به نام‌های ⚛️ Components و ⚛️ Profiler به ابزار توسعه شما اضافه خواهند شد.
مرورگرهایی مانند Safari از این افزونه به صورت پیش‌فرض پشتیبانی نمی‌کنند. برای خطایابی در این محیط‌ها، باید نسخه مستقل (Standalone) ابزار را از طریق ابزار ترمینال و به صورت سراسری روی سیستم خود نصب کنید:
# نصب با استفاده از ابزار Npm
npm install -g react-devtools
# یا نصب با استفاده از ابزار Yarn
yarn global add react-devtools
پس از اتمام نصب، دستور زیر را در ترمینال اجرا کنید تا پنجره اختصاصی ابزار باز شود:
react-devtools
برای متصل شدن وب‌سایت به این پنجره مستقل، کافی است تگ اسکریپت زیر را در بالاترین بخش تگ <head> پروژه خود قرار دهید و صفحه را در مرورگر Safari رفرش کنید:
<html>
<head>
<script src="http://localhost:8097"></script>
</head>
</html>
برای بررسی و رفع خطای اپلیکیشن‌های موبایل بومی که با فریم‌ورک React Native توسعه داده شده‌اند، ابزار تخصصی React Native DevTools به صورت پیش‌فرض درون خود فریم‌ورک تعبیه شده است.
این ابزار داخلی، قابلیت‌های کاملی از ابزار توسعه راکت را درون خود جای داده است.
تمامی ویژگی‌ها از جمله بررسی کامپوننت‌ها، تغییر وضعیت‌ها و قابلیت جذاب هایلایت و انتخاب مستقیم المان‌ها روی شبیه‌ساز موبایل (Native Element Highlighting) کاملاً مشابه نسخه مرورگر کار می‌کنند.
نکته برای پروژه‌های قدیمی: اگر از نسخه‌های قدیمی‌تر فریم‌ورک React Native (نسخه‌های قبل از 0.76) استفاده می‌کنید، ابزار جدید داخلی در دسترس نیست. برای این پروژه‌ها باید مطابق راهنمای بخش Safari، پکیج
react-devtoolsرا روی سیستم نصب کرده و اپلیکیشن موبایل خود را به آن متصل کنید.
| نام تب | وظیفه اصلی | کاربرد عملی |
| Components | نمایش درخت ساختار برنامه | دیدن چیدمان کامپوننت‌ها، بررسی اینکه چه کدهایی به کامپوننت پاس داده شده (Props) و تغییر زنده وضعیت‌ها (State) برای تست سریع صفحات. |
| Profiler | سنجش زمان و سرعت | ضبط و ثبت رفتار برنامه در حین کار با سایت؛ برای پیدا کردن کامپوننت‌های سنگینی که رندر مجدد (Rerender) ناخواسته ایجاد می‌کنند و سرعت سایت را کاهش می‌دهند. |
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://react.dev/learn