أدوات مطوري React

استخدم أدوات مطور React لفحص المكونات، وتعديل الخصائص والحالة وتحديد مشاكل الأداء.

إضافة للمتصفح

أسهل طريقة لحل المشاكل البرمجية للمواقع المبنية بـ React أن تثبت إضافة أدوات مطوري React للمتصفح. وهي متوفرة لعدة متصفحات شهيرة:

الآن، إن زرت موقعًا مبنيًا باستخدام React سترى نافذتي المكونات (Components) و المُحلل (Profiler) في أدوات المطور.

للمتصفحات الأخرى (مثل Safari)، قم بتثبيت حزمة npm react-devtools:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

ثم افتح أدوات المطور في موجه الأوامر (Terminal):

react-devtools

ثم اربط موقعك بإضافة عنصر <script> التالي إلى بداية <head> في موقعك:

<html>
  <head>
    <script src="http://localhost:8097"></script>

أعد تحميل موقعك الآن في المتصفح لتراه في أدوات المطور.

يمكن استخدام أدوات مطوري React لفحص التطبيقات المبنية بـ React Native.

أسهل طريقة لاستخدام أدوات مطوري React هي تثبيتها على نطاق عام:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

ثم افتح أدوات المطور في موجه الأوامر (Terminal):

react-devtools

من المفترض أنه سيتصل بأي تطبيق React Native محلي إن كان يعمل.

جرب إعادة تحميل التطبيق إن لم تتصل أدوات المطور بعد ثوانٍ.