ابزار توسعه ری‌اکت
از ابزار توسعه ری‌اکت برای بررسی کامپوننت‌ها، ویرایش prop و state و همچنین شناسایی مشکلات عملکردی استفاده می‌شود.
You will learn
- چگونه ابزار توسعه ری‌اکت را نصب کنید.
اکستنشن های مرورگر
نصب افزونه ابزار توسعه ری‌اکت ساده‌ترین روش برای اشکال‌زدایی وب‌سایت‌های ساخته‌شده با ری‌اکت است. این افزونه برای چند مرورگر محبوب در دسترس است.
اکنون، اگر از یک وب‌سایت ساخته‌شده با ری‌اکت بازدید کنید، پانل‌های Components و Profiler را خواهید دید.
سافاری و سایر مرورگر ها
برای سایر مرورگر ها (مانند سافاری) پکیج react-devtools را نصب کنید.
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtoolsسپس ابزارهای توسعه را از ترمینال باز کنید:
react-devtoolsسپس با اضافه کردن تگ <script> زیر به ابتدای تگ <head> وب‌سایت خود را متصل کنید:
<html>
<head>
<script src="http://localhost:8097"></script>اکنون وب‌سایت خود را در مرورگر بازخوانی کنید تا بتوانید آن را در ابزار توسعه مشاهده کنید.
موبایل (ری‌اکت نیتیو)
برای بررسی برنامه‌هایی که با ری‌اکت نیتیو ساخته شده‌اند، می‌توانید از React Native DevTools استفاده کنید. این ابزار اشکال‌زدای داخلی است که به‌طور کامل با ابزار توسعه ری‌اکت ادغام شده است. همه ویژگی‌ها، از جمله برجسته‌سازی و انتخاب عناصر بومی، به‌طور دقیق مشابه نسخه افزونه مرورگر کار می‌کنند.
در مورد اشکال زدایی در ری‌اکت نیتیو بیشتر بخوانید.
برای نسخه‌های ری‌اکت نیتیو قبل از 0.76، لطفاً از نسخه مستقل React DevTools مطابق راهنمای سافاری و سایر مرورگرها در بالا استفاده کنید.