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

Question

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

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

कोई व्यक्ति प्रतिक्रिया टैब के साथ काम कर रहे नेटवर्क टैब को प्राप्त करने के साथ-साथ ऐसा करने में शामिल सुरक्षा समस्याओं के स्पष्टीकरण के लिए एक चरण-दर-चरण मार्गदर्शिका प्रदान कर सकता है? js जहां अनुरोध या प्रतिक्रिया

Answer 1

जोड़ें डीबगर।

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

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

Answer 2

मैं polyfill कि प्रतिक्रिया मूल निवासी प्रतिक्रिया मूल निवासी आयात करने के बाद प्रदान करता है को हटाने के द्वारा Chrome में अपनी अनुरोधों डिबग करने के लिए कर रहा था देख सकते हैं में

Answer 3

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

http://charlesproxy.com

Answer 4

यह वही है मैं अपने ऐप

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

XMLHttpRequest = _XHR 

संपादित की प्रवेश बिंदु में प्रयोग कर रहे है। धन्यवाद frevib!

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

स्पष्टीकरण:

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

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

संपादित करें: Read about the RN github issue है कि मुझे इस समाधान

Answer 5

मैं अपने ऐप्लिकेशन में निम्नलिखित (आपका मुख्य app.js प्रवेश बिंदु फ़ाइल में इस जोड़े) का उपयोग करने के लिए नेतृत्व:

// 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; 
    }); 
}; 

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

स्क्रीनशॉट:

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

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

नियमित कॉल के लिए नहीं है, लेकिन बहुखण्डीय/फार्म-डेटा के लिए इसका इस्तेमाल कॉल