ابزار توسعه ری‌اکت
از ابزار توسعه ری‌اکت برای بررسی کردن کاپوننت ها، تغییرات پراپ و وضعیت ها و همچنین شناسایی مشکلات عملکردی و کارایی استفاده می شود.
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 برای سافاری و سایر مرورگر ها در راهنمای فوق استفاده کنید.