मैं रिएक्टिव नेटिव में नेटवर्क अनुरोध (डिबगिंग के लिए) कैसे देख सकता हूं?

Question

मैं अपने नेटवर्क अनुरोधों को डीबग करने में मदद करने के लिए रिएक्ट नेटिव में देखना पसंद करता हूं - आदर्श रूप से क्रोम के डिवेट्स के 'नेटवर्क' टैब में।

GitHub ( https://github.com/facebook/react-native/issues/4122 और https://github.com/facebook/react-native/issues/934 ) पर इस बारे में कुछ बंद मुद्दे हैं लेकिन मैं डॉन नहीं हूं टी उन्हें पूरी तरह से समझते हैं। ऐसा लगता है कि मुझे कुछ रिएक्टिव नेटिव के पॉलीफिल को पूर्ववत करने और फिर अतिरिक्त डिबगिंग झंडे के साथ कुछ कमांड चलाने की आवश्यकता है, और शायद कुछ क्रोम सुरक्षा सेटिंग्स को संशोधित करें? और जाहिर तौर पर ऐसा करने में कुछ सुरक्षा मुद्दे शामिल हैं जो इसे एक भयानक विचार बना सकते हैं, लेकिन धागे में शामिल किसी ने भी स्पष्ट रूप से नहीं बताया है कि वे क्या हैं।

क्या कोई व्यक्ति प्रतिक्रियात्मक मूल के साथ काम कर रहे नेटवर्क टैब को प्राप्त करने के लिए एक कदम-दर-चरण मार्गदर्शिका प्रदान कर सकता है, साथ ही ऐसा करने में शामिल सुरक्षा मुद्दों की व्याख्या भी कर सकता है?

Answer 1

यह वही है जो मैं अपने ऐप के प्रवेश बिंदु में उपयोग कर रहा हूं

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

संपादित करें: फ्रीविब नीचे और अधिक संक्षिप्त सिंटैक्स से जुड़ा हुआ है। धन्यवाद फ़्रीविब!

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

स्पष्टीकरण:

GLOBAL.originalXMLHttpRequestक्रोम देव उपकरण XHR की प्रतिलिपि संदर्भित करता है। यह आरएन द्वारा एस्केप हैच के रूप में प्रदान किया जाता है। श्वेतस्य का उपाय केवल तभी काम करेगा जब देव उपकरण खुले हों और इस प्रकार प्रदान हो XMLHttpRequest।

संपादित करें: आपको डिबगर मोड में क्रॉस मूल अनुरोधों की अनुमति देने की आवश्यकता होगी। क्रोम के साथ आप इस आसान प्लगइन का उपयोग कर सकते हैं ।

EDIT: RN github मुद्दे के बारे में पढ़ें जो मुझे इस समाधान की ओर ले जाते हैं

Comments

कोड के उस टुकड़े को डालने के बाद मैं डेवलपर कंसोल में अनुरोध देखने में सक्षम हूं, लेकिन मेरा सभी अनुरोध 404 स्थिति के साथ विफल हो जाता है। किसी को भी किसी भी विचार क्यों ऐसा हो सकता है?

— पीटर_फैटर

यह काम। से ले लिया Github

— frevib

यह मेरे लिए काम नहीं करता है। मैं एंड्रॉइड एमुलेटर का उपयोग करता हूं, और नेटवर्क टैब खाली दिखाता है यहां तक ​​कि अनुरोध भेजे जा रहे हैं

— विले मिकक-ओजा

यह किसी भी अधिक काम नहीं करता है, निम्नलिखित त्रुटि कंसोल में आती है (सुनिश्चित नहीं है कि यह किस कारण से हुआ है):Uncaught Error: unsupported BodyInit type at Response.Body._initBody (fetch.js:231) at new Response (fetch.js:390) at XMLHttpRequest.xhr.onload (fetch.js:437)

— मैक्सिम जुबेरव

इस वन-लाइनर सेट-अप के साथ रिएक्टिव नेटिव डीबगर पर मेरी तरफ से काम करता है । एक लाख बार धन्यवाद, @tryangul

— Kaloyan Kosev

Answer 2

मुझे यकीन नहीं है कि किसी ने अभी तक इस समाधान को क्यों नहीं बताया है। रिएक्ट नेटिव डीबगर - https://github.com/jhen0409/react-native-debugger का उपयोग करें ! यह मेरी राय में प्रतिक्रिया मूल के लिए सबसे अच्छा डिबगिंग उपकरण है और यह नेटवर्क निरीक्षण बॉक्स से बाहर देता है।

इन स्क्रीनशॉट्स पर एक नज़र डालें।

राइट क्लिक करें और 'नेटवर्क निरीक्षण सक्षम करें' चुनें

राइट क्लिक करें और 'नेटवर्क निरीक्षण सक्षम करें' चुनें

डिबग दूर!

Comments

यदि आप स्किमिंग कर रहे हैं और यह उत्तर देखें, तो ध्यान दें कि आप राइट-क्लिक करें और Enable Network Inspectइसके लिए काम करना होगा। डिफ़ॉल्ट रूप से, यह नहीं है।

— स्टीफन सौसर

यह महान काम करता है! मेरे जीवन को इतना आसान बना देगा।

— अगस्तो समामे बैरिएन्टोस

वाह, यह सुविधा मुख्य पैनल पर राइट क्लिक द्वारा क्यों छिपाई गई है। कभी पता नहीं था कि अस्तित्व में है। खेल परिवर्तक। जसन प्रतिक्रियाएं नहीं दिखा रहे थे ... सीधे टॉगल पर दिखाएं। धन्यवाद!

— मैट अप

यह अधिक व्यापक रूप से क्यों नहीं जाना जाता है? 🤷🤷44

— टॉम मूलकिन्स

जब भी हम नेटवर्क टैब पर जाते हैं या उस टैब के अंदर सेटिंग (चेकबॉक्स या कुछ प्रकार) के रूप में चिह्नित करते हैं तो यह डिफ़ॉल्ट व्यवहार क्यों नहीं है!

— साइबरएम

Answer 3

मैं अपने ऐप में निम्नलिखित का उपयोग करता हूं (इसे अपने मुख्य ऐप में जोड़ें। जेएस प्रविष्टि बिंदु फ़ाइल):

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

  // fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  });
};

सबसे अच्छी बात यह है कि यह कंसोल में भ्रूण लॉग को भी दिखाता है जो अच्छी तरह से स्वरूपित हैं।

स्क्रीनशॉट:

नेटवर्क टैब पर:

Comments

वह तो कमाल है! धन्यवाद

— डीजे आगे

मूल अनुरोध के किस बिंदु पर यह निकाल दिया गया है? मैं वास्तव में इसे ताज़ा करने के लिए एक आग के तंत्र के रूप में उपयोग करने के बारे में सोच रहा हूं अगर एक प्रतिक्रिया में 401 है। क्या इसके साथ कोई समस्या है?

— tushar747

काल्पनिक संकल्प! मुझे अपने मेट्रो बिल्डर को दुर्घटनाग्रस्त किए बिना रीकोट्रॉन को काम करने में परेशानी हुई है। आपका समाधान महान काम करता है। यहां तक ​​कि रिएक्ट नेटिव डीबगर में भी काम करता है।

— मध्ययुगीन

प्रतिक्रिया में 'एक्सेस-कंट्रोल-अलाउंस-ओरिजिन' हेडर का मूल्य वाइल्डकार्ड '*' नहीं होना चाहिए जब अनुरोध का क्रेडेंशियल मोड 'शामिल' हो। उत्पत्ति ' लोकलहोस्ट: 8081 ' की अनुमति नहीं है। XMLHttpRequest द्वारा शुरू किए गए अनुरोधों के क्रेडेंशियल मोड को withCredentials विशेषता द्वारा नियंत्रित किया जाता है।

— निखिल माहिराराव

बहुत बढ़िया। बहुत बहुत धन्यवाद

— मार्क

Answer 4

मैं नेटवर्क अनुरोध को ट्रैक करने के लिए रिएक्टोट्रॉन का उपयोग करता हूं ।

Comments

यह वास्तव में यहाँ (मेरे लिए) सभी उत्तरों में से सबसे अच्छा समाधान है .. सुपर आसान स्थापित करने के लिए और क्रोम का उपयोग करने के सभी साइड इफेक्ट नहीं हैं

— ब्लू बॉट

आप जिस क्रोम के बारे में चिंतित हैं, उसका उपयोग करने के क्या दुष्प्रभाव हैं? रिएक्टोट्रॉन क्रोमियम एंबेडेड फ्रेमवर्क का उपयोग करता है।

— पीटर इवान डील

बहुत बढ़िया !! धन्यवाद आपने मुझे नेट पर खोज के दिनों को बचाया

— एलेन

Answer 5

मुझे पता है कि यह एक पुराना सवाल है, लेकिन अब ऐसा करने के लिए बहुत सुरक्षित तरीका है कि कोर को निष्क्रिय करने या प्रतिक्रिया मूल स्रोत कोड को बदलने की आवश्यकता नहीं है। आप रेक्टोट्रॉन नामक एक थर्ड पार्टी लाइब्रेरी का उपयोग कर सकते हैं जो न केवल एपीआई कॉल (नेटवर्क प्लगइन का उपयोग करके) को ट्रैक करता है, बल्कि आपके Redux स्टोर, और अतिरिक्त सेटअप के साथ सागा को भी ट्रैक कर सकता है:

https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md

Comments

रेक्टोट्रॉन केवल तभी काम करता था जब आप बाहरी पुस्तकालय का उपयोग करते थे जिसे एपिसेस कहते हैं। यह सामान्य लाने के लिए काम नहीं करता है। इसलिए यदि आप अपने ऐप में बाहरी पुस्तकालयों द्वारा भेजे गए अनुरोधों की निगरानी करना चाहते हैं, तो रिएक्टोट्रॉन अच्छा नहीं है।

— विले मीक्क-ओजा

@ VilleMiekk-oja वास्तव में रिएक्टोट्रॉन मार्च के बाद से नेटवर्किंग के साथ समर्थन करता है, यह सिर्फ प्रलेखन पुराना था। मैंने इसे स्वयं आज़माया, और इसे रीडमी पर सही कर लिया :)

— जुआन कार्लोस अल्पीज़र चिनचिला

यह उत्कृष्ट काम करता है; मैंने इसके साथ कई मुद्दे देखे हैं: GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

— पेट्रोगैड

प्रतिक्रिया-देशी अनुप्रयोगों के नेटवर्क कॉल को ट्रैक करने के लिए रिएक्टोट्रॉन वास्तव में कॉन्फ़िगर और उपयोगी है

— राम

Answer 6

मैं क्रोम में अपने अनुरोधों को डीबग करने में सक्षम था, जो कि रिएक्टिव नेटिव के आयात के बाद रिएक्ट नेटिव प्रदान करता है।

var React = require('react-native');
delete GLOBAL.XMLHttpRequest;

यह मेरे लिए एक ही मूल अनुरोधों के लिए काम किया। यकीन नहीं है कि अगर आपको क्रॉस मूल के लिए काम करने के लिए क्रोम में कोर्स को अक्षम करना है।

Comments

रिएक्टिव नेटिव ऐप से किए गए अनुरोधों के संदर्भ में "समान मूल" अनुरोध क्या है? एक कि डीबगर (यानी शायद लोकलहोस्ट) के रूप में एक ही डोमेन पर है?

— मार्क एमी

मेरे मामले के लिए आपको क्रॉस मूल के लिए काम करने के लिए क्रोम में कोर्स को अक्षम करना होगा। इस क्रोम प्लगइन की जाँच करें: chrome.google.com/webstore/detail/allow-control-allow-origi/…

— मौहम्मद हालौल

@MouhamedHalloul क्या आप बता सकते हैं कि आपने इस प्लगइन का उपयोग कैसे किया?

— एलेग्जेन

@alexmngn हे, बस प्लगइन स्थापित करें और बटन को खिसकाते हुए इसे चालू करें, आइकन चालू होने पर हरा होना चाहिए और बंद होने पर लाल होना चाहिए। dropbox.com/s/242fflwgcew6m50/…

— मौहम्मद हालउल

Answer 7

अतीत में मैंने GLOBAL.XMLHttpRequestअपने एपीआई अनुरोधों को ट्रैक करने के लिए हैक का उपयोग किया था लेकिन कभी-कभी यह बहुत धीमा होता है और संपत्ति के अनुरोधों के लिए काम नहीं करता है। मैंने Postman’s proxyफोन से HTTP संचार के निरीक्षण के लिए फीचर का उपयोग करने का निर्णय लिया । विवरण के लिए आधिकारिक दस्तावेज देखें , लेकिन मूल रूप से, तीन आसान चरण हैं:

• Postman में प्रॉक्सी सेट करें
• अपने कंप्यूटर का IP पता जांचें ($ ifconfig ) देखें
• वाईफाई सेटिंग में अपने मोबाइल डिवाइस पर HTTP प्रॉक्सी कॉन्फ़िगर करें

Answer 8

कृपया इस कोड से सावधान रहें।

XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
   GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

यह मदद करता है और यह बहुत अच्छा है लेकिन यह अपलोड को नष्ट कर देता है। मैं 2 दिन बिताने की कोशिश कर रहा हूं कि अपलोड की गई फाइलें असली फ़ाइल के बजाय [ऑब्जेक्ट ऑब्जेक्ट] क्यों भेज रही हैं। कारण ऊपर एक कोड है।

इसे नियमित कॉल के लिए नहीं बल्कि मल्टीपार्ट / फॉर्म-डेटा कॉल के लिए उपयोग करें

Answer 9

मैं आपके नेटवर्क अनुरोधों का निरीक्षण करने के लिए चार्ल्स का उपयोग करने का सुझाव देता हूं। यह वास्तव में अच्छा है और अधिक दृश्यता प्रदान करता है और आपको उन्नत सामान करने की अनुमति देता है।

http://charlesproxy.com

Comments

बस चार्ल्स की कोशिश की और यह केवल कब्जा करने के लिए लगता है http://localhost:8081/index.android.bundle?platform=android&dev=true.. यह कैसे सभी अनुरोधों पर कब्जा करने के लिए? (मैं एक बाहरी एपीआई मार रहा हूं)

— जेकफॉकर 20

क्या आपका बाहरी API HTTPS का उपयोग करता है? यदि हां, तो आपको उन लोगों को पकड़ने के लिए चार्ल्स को थोड़ा कॉन्फ़िगर करने की आवश्यकता है।

— रण यफेट

एंड्रॉइड का उपयोग करते समय, आउटगोइंग अनुरोधों को पकड़ने के लिए चार्ट थोड़ा समस्याग्रस्त हो सकता है। आपको अपने सिम्युलेटर को चार्ट (और पिछली बार जब मैंने कोशिश की थी, एक्सेस करने के लिए अपने सिम्युलेटर को कॉन्फ़िगर करने की आवश्यकता है), तो कॉन्फ़िगर पैनल में जाकर काम नहीं करेगा - प्रॉक्सी आईपी को कमांड लाइन इंस्टेंशन से पारित करने की आवश्यकता है)।

— जोई

Answer 10

यदि आप अपने ऐप के रिलीज़ संस्करण पर नेटवर्क अनुरोध डीबग करना चाहते हैं, तो आप लाइब्रेरी रिएक्ट-नेटिव-नेटवर्क-लॉगर का उपयोग कर सकते हैं । यह आपको कस्टम डिबग स्क्रीन से ऐप के भीतर नेटवर्क अनुरोधों की निगरानी और देखने की सुविधा देता है।

इसके बाद आप इसे प्रोडक्शन ऐप में यूजर्स के लिए डिसेबल करने के लिए बिल्ड फ्लैग या नेटवर्क फ्लैग के पीछे रख सकते हैं।

बस इसके साथ इसे स्थापित करें और इसे yarn add react-native-network-loggerअपने ऐप के प्रवेश बिंदु पर जोड़ें:

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

और यह एक डिबग स्क्रीन पर:

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger />;

अस्वीकरण: मैं पैकेज लेखक हूं।

Comments

यार ये काम तो कमाल का है! धन्यवाद

— Emidomenge

Answer 11

यदि आपके पास एक Android फोन या एमुलेटर है,

• npx react-native start

फिर एंड्रॉइड स्टूडियो खोलें ।

androidअपने प्रोजेक्ट के फ़ोल्डर को Android Studio प्रोजेक्ट के रूप में खोलें ।

उस नीले आइकन पर क्लिक करें जो यह Android Profiler है

एंड्रॉइड प्रोफाइलर शुरू होने के बाद, आप SESSIONSलेबल के पास ग्रे प्लस आइकन के माध्यम से अपना ऐप जोड़ सकते हैं

अब आप इस टूल के माध्यम से नेटवर्किंग का निरीक्षण कर सकते हैं। आप त्रिकोण देख सकते हैं जो आपकी नेटवर्क गतिविधि को दर्शाता है।

नेटवर्क ट्रैफ़िक का निरीक्षण करने के बारे में अधिक जानकारी के लिए कृपया इसे देखें ।

Answer 12

Js में डीबगर जोड़ें जहाँ आप पुनः या प्रतिक्रिया देख सकते हैं