एक एक्सपो ऐप के लिए रिएक्टिव नेटिव डीबगर को स्थापित करने के लिए एक संपूर्ण गाइड

[20 मार्च, 2019 को अपडेट किया गया]

React Native Debugger रिएक्टिव नेटिव एप्लिकेशन को डीबग करने का पवित्र ग्रिल है क्योंकि यह Chrome Devtools, React Devtools और Redux Devtools सभी को एक विंडो में जोड़ती है।

यहां मैं एक एक्सपो ऐप में रिएक्ट नेटिव डीबगर को स्थापित करने के लिए चरण प्रस्तुत करता हूं।

[त्वरित गाइड]

  • रिलीज़ पेज से रिएक्टिव नेटिव डीबगर डाउनलोड करें।
  • नई विंडो खोलने और पोर्ट को 19001 पर सेट करने के लिए डीबगर, t + t को खोलें।
  • npm स्टार्ट एक्सपो ऐप, डेवलपर मेनू खोलें, "दूरस्थ रूप से जेएस रिमोट करें" सक्षम करें।
  • सेटअप "__REDUX_DEVTOOLS_EXTENSION__" जैसा कि यहां दिखाया गया है।

सबसे अधिक संभावना है, यह काम करना चाहिए!

यदि आपके पास कोई समस्या है या कुछ और टिप्स और ट्रिक्स जानना चाहते हैं, तो नीचे दी गई गाइड को पढ़ें।

  1. प्रतिक्रियाशील मूल निवासी डिबगर स्थापित करें

रिएक्टिव नेटिव डीबगर को स्थापित करने के लिए, आप इसे रिलीज़ पृष्ठ से डाउनलोड कर सकते हैं।

MacOS के लिए, आप स्थापित करने के लिए Homebrew का उपयोग कर सकते हैं:

$ काढ़ा अद्यतन && काढ़ा पीपा प्रतिक्रिया-देशी-डिबगर स्थापित करें

2. रिएक्टिव नेटिव डीबगर शुरू करें

रिएक्टिव नेटिव डीबगर शुरू करने के लिए, मैन्युअल रूप से ऐप खोलें।

MacOS के लिए, आप इस तरह से एक CLI स्क्रिप्ट का उपयोग कर सकते हैं।

$ खुला open रेंडेबगर: // सेट-डिबगर-लोकल; होस्ट = लोकलहोस्ट और पोर्ट = 19001 '

पोर्ट 19001 पर सेट है क्योंकि एक्सपो के मेट्रो बंडलर उस पोर्ट का उपयोग करते हैं। हालाँकि, जब आप मैन्युअल रूप से ऐप खोलें पर क्लिक करेंगे, तो पोर्ट 8081 पर सेट हो जाएगा क्योंकि रिएक्ट नेटिव डीबगर में डिफ़ॉल्ट सेटिंग है।

दूसरे पोर्ट पर सेट करने के लिए, नई विंडो खोलने के लिए t + t दबाएं जहां आप एक्सपो के मेट्रो बंडलर पोर्ट (डिफ़ॉल्ट 19001) के पोर्ट को रीसेट कर सकते हैं।

3. एक्सपो ऐप शुरू करें और जेएस रिमोट को डीबग करें

$ npm शुरू

अपना एप्लिकेशन खोलें, डेवलपर मेनू खोलें, फिर "दूरस्थ रूप से जेएस रिमोट करें" सक्षम करें। अब क्रोम डेवलपर टूल्स को कनेक्ट किया जाना चाहिए।

मामले में, डेवलपर मेनू खोलने के लिए, एक्सपो क्लाइंट के साथ "शेक", iOS सिम्युलेटर के साथ "d + d", एंड्रॉइड एमुलेटर के साथ "with + m"।

MacOS में सुविधा के लिए, आप चरण 2 और 3 को इस तरह एक स्क्रिप्ट में लपेट सकते हैं।

4. रिएक्ट देवटूल स्थापित करना

यदि आप एक्सपो क्लाइंट (वाई-फाई के माध्यम से वास्तविक डिवाइस) का उपयोग करते हैं, तो डॉक्स बताता है कि एक अतिरिक्त कदम आवश्यक हो सकता है।

SetupDevtools.js फ़ाइल को नोड_मॉडल / प्रतिक्रिया-मूलक / लाइब्रेरी / कोर / Devtools / setupDevtools.js पर खोजें।

अब, संपत्ति "होस्ट" फ़ंक्शन "connectToDevTools" को पास कर दिया गया है जिसे नीचे दिए गए अपने स्थानीय आईपी पते में बदलना होगा।

(यहां अपना स्थानीय आईपी पता देखें)

(आपको अपने "स्थानीय" आईपी पते की आवश्यकता है, न कि "सार्वजनिक" आईपी। जो आपको मेरे आईपी क्या है?

रिएक्ट देवटुल्स अब चलना चाहिए!

5. Redux Devtools की स्थापना

चूंकि खिड़की .__ REDUX_DEVTOOLS_EXTENSION__ पहले से ही प्रदान की गई है, आप सामान्य नृत्य के साथ redux devtools शामिल कर सकते हैं।

या यदि आप अन्य बिचौलियों का उपयोग करते हैं,

यह कर देगा चाल!

रिएक्ट नेटिव डीबगर के पिछले संस्करणों में, बॉक्स से बाहर redux devtools शामिल नहीं थे। ऐसे मामलो मे,

$ npm i redux-devtools-extension

फिर,

फिर, अगर सब कुछ ठीक हो गया है, तो आपको कुछ इस तरह से देखना चाहिए।

P.S नेटवर्क रिक्वेस्ट को लॉग इन करने के लिए, रिएक्ट देवटुल्स या रेडक्स देवटुल्स सेक्शन पर राइट क्लिक करें और नेटवर्क इंसपेक्ट को सक्षम करें पर क्लिक करें!

उम्मीद है आपको पसंद आया होगा! GitHub पर मेरे साथ जुड़ें!

यह सभी देखें

मैं उस वेबसाइट पर फिक्स्ड HTML को कस्टमाइज़ करने के लिए CSS (केवल उसी तत्व का उपयोग कर सकता हूं) का उपयोग कर सकता हूं जो किसी परिभाषित वर्ग को पृष्ठ पर उच्च स्थान पर ले जाने के लिए उपयोग करता है? हम जो सोचते हैं उससे अधिक पेशा क्या अदा करता है? अगर मैं किसी भी प्रोग्रामिंग भाषा के साथ पूर्व अनुभव नहीं रखता, तो मैं 4-5 महीनों में डेटा वैज्ञानिक कैसे बन सकता हूं? कैसे मैक में दो सफारी खिड़कियों के बीच स्विच करने के लिएमैं अपने स्टार्ट अप को कैसे मान्य करूं? html से php कैसे कॉल करेकैसे बताएं कि एक यौगिक एक गैस हैकिसी विशेष कंपनी द्वारा एक बहुत ही पेशेवर मोबाइल एप्लिकेशन को विकसित करने और बनाए रखने में कितना खर्च होता है?