دليل شامل لتثبيت React Native Debugger إلى تطبيق Expo

[تم التحديث في 20 مارس 2019]

React Native Debugger هو الكأس المقدسة لتصحيح تطبيقات React Native لأنه يجمع بين Devtools Chrome و React Devtools و Redux Devtools كلها في نافذة واحدة.

هنا أقدم الخطوات لتثبيت React Native Debugger إلى تطبيق Expo.

[مرشد سريع]

  • قم بتنزيل React Native Debugger من صفحة الإصدار.
  • انقر فوق فتح المصحح ، ⌘ + t لفتح نافذة جديدة وتعيين منفذ إلى 19001.
  • npm start expo application ، افتح قائمة Developer ، وقم بتمكين "Debug JS عن بعد".
  • الإعداد "__REDUX_DEVTOOLS_EXTENSION__" كما هو موضح هنا.

على الأرجح ، يجب أن يكون العمل!

إذا كانت لديك أية مشكلات أو ترغب في معرفة المزيد من النصائح والحيل ، فاقرأ الدليل المتعمق التالي.

  1. تثبيت React Native Debugger

لتثبيت React Native Debugger ، يمكنك تنزيله من صفحة الإصدار.

بالنسبة لنظام التشغيل MacOS ، يمكنك استخدام Homebrew لتثبيت:

$ brew update && brew cask install react-native-debugger

2. بدء الرد المصحح الأصلي

لبدء React Native Debugger ، انقر فوق فتح التطبيق يدويًا.

بالنسبة لنظام التشغيل MacOS ، يمكنك استخدام برنامج نصي CLI مثل هذا.

$ open nd rndebugger: // set-debugger-loc؟ host = localhost & port = 19001 '

تم تعيين المنفذ على 19001 حيث يستخدم المترو المتوفر من Expo ذلك المنفذ. ومع ذلك ، عند النقر فوق "فتح التطبيق" يدويًا ، سيتم تعيين المنفذ على 8081 لأن هذا هو الإعداد الافتراضي في React Native Debugger.

لتعيين منفذ آخر ، اضغط على ⌘ + t لفتح نافذة جديدة حيث يمكنك إعادة تعيين المنفذ إلى منفذ المترو التابع لمعرض Expo (الافتراضي 19001).

3. بدء تطبيق Expo و Debug JS عن بعد

$ npm البداية

افتح التطبيق الخاص بك ، افتح قائمة Developer ، ثم قم بتمكين "Debug JS عن بعد". الآن يجب أن تكون مرتبطة أدوات المطور كروم.

في هذه الحالة ، لفتح قائمة المطورين ، "اهتز" مع عميل Expo ، "⌘ + d" باستخدام محاكي iOS ، "⌘ + m" مع محاكي Android.

للراحة في نظام MacOS ، يمكنك التفاف الخطوتين 2 و 3 ببرنامج نصي واحد مثل هذا.

4. إعداد رد فعل Devtools

إذا كنت تستخدم عميل Expo (جهاز حقيقي عبر Wi-Fi) ، فإن مُحرر المستندات قد يكون من الضروري اتخاذ خطوة إضافية.

ابحث عن ملف setupDevtools.js على node_modules / react-native / Libraries / Core / Devtools / setupDevtools.js.

الآن ، يجب تغيير الخاصية "host" التي تم تمريرها إلى وظيفة "connectToDevTools" إلى عنوان IP المحلي الخاص بك على النحو التالي.

(تحقق من عنوان IP المحلي الخاص بك هنا)

(أنت بحاجة إلى عنوان IP "المحلي" ، وليس عنوان IP "العام". الذي تحصل عليه عن طريق googling ما هو ip الخاص بي؟ هو IP العام)

رد فعل devtools يجب أن يكون قيد التشغيل الآن!

5. إعداد Redux Devtools

منذ أن تم توفير نافذة .__ REDUX_DEVTOOLS_EXTENSION__ بالفعل ، يمكنك تضمين devtools المسترجعة مع الرقص المعتاد.

أو إذا كنت تستخدم برامج أخرى ،

هذا وسوف تفعل خدعة!

في الإصدارات السابقة من React Native Debugger ، لم يتم تضمين devtools المسترجعة خارج الصندوق. في مثل هذه الحالات،

$ npm i redux-devtools-extension

ثم،

مرة أخرى ، إذا كان كل شيء على ما يرام ، يجب أن ترى شيئًا كهذا.

ملاحظة: لتسجيل طلبات الشبكة ، انقر بزر الماوس الأيمن فوق قسم React Devtools أو Redux Devtools وانقر فوق تمكين Network Inspect!

أتمنى أن يعجبك ذلك! تواصل معي على جيثب!