ابزارهای توسعه‌دهندگان React
از ابزارهای توسعه‌دهندگان (Developer Tools) React می توانید برای بررسی کامپوننت ها، ویرایش props و state، و شناسایی مشکلات عملکرد استفاده کنید.
افزونه مرورگر
آسان‌ترین راه برای اشکال‌زدایی وب‌سایت‌های ساخته شده با React، نصب افزونه مرورگر ابزارهای توسعه دهندگان است. این افزونه برای مرورگرهای محبوب زیر قابل نصب است:
حالا، اگر وب‌سایتی که با React ساخته شده را باز کنید، در ابزارهای توسعه دهندگان پنل‌های 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)
برای بررسی برنامه‌های ساخته شده با React Native، می‌توانید از React Native DevTools، که با دیباگر داخلی که با ابزارهای توسعه‌دهنده React عمیقن یکپارچه شده است، استفاده کنید. تمامی ویژگی‌ها دقیقا مشابه افزونه مرورگر عمل می‌کنند، از جمله هایلایت و انتخاب عناصر نیتیو.
برای یادگیری بیشتر در مورد اشکال‌زدایی در React Native.
برای نسخه‌های React Native قبل از 0.76، لطفاً از نسخه مستقل ابزارهای توسعه‌دهنده React بر اساس راهنمای سافاری و سایر مرورگرها که در قسمت قبل آمده استفاده کنید.