2014-10-13 9 views
48

मैं एक अनुप्रयोग को डीबग कर रहा हूं जो React.js का उपयोग करता है, क्रोम एक्सटेंशन सूची स्पष्ट रूप से दिखाती है कि प्रतिक्रिया डेवलपर उपकरण स्थापित हैं, और जब मैं http://facebook.github.io/react/ पर प्रतिक्रिया साइट तक पहुंचता हूं तो मैं स्पष्ट रूप से देख सकता हूं डेवलपर टूल विंडो में एक "प्रतिक्रिया" टैब। फिर भी जब मैं अपने आवेदन मैं कंसोल में इस देखना डिबगिंग हूँ:क्रोम ब्राउज़र में लोड नहीं होने वाले देव उपकरण को प्रतिक्रिया दें

Download the React DevTools for a better development experience: http://fb.me/react-devtools React.js:87

कोई मुझे बता सकते हैं कि यह कैसे डेवलपर टूल प्रतिक्रिया उपयोग करने के लिए प्राप्त करने के लिए?

धन्यवाद!

उत्तर

22

अब आपको कुछ भी करने की आवश्यकता नहीं है।


पुराने प्रतिक्रिया संस्करणों के लिए, मुख्य आवश्यकता यह खिड़की है। प्रतिक्रिया सेट है। यदि आप मॉड्यूल सिस्टम का उपयोग कर रहे हैं:

if (typeof window !== 'undefined') { 
    window.React = React; 
} 

यह आमतौर पर आपकी मुख्य स्रोत फ़ाइल में किया जाना चाहिए।

+0

धन्यवाद! उसमें प्रतिक्रिया टैब दिखाई देने लगा। मैं इसे एक छोटे से (i Coffeescript उपयोग कर रहा हूँ) अलंकृत: अगर typeof खिड़की नहीं है "अनिर्धारित" window.React = प्रतिक्रिया window.onload = -> React.renderComponent अनुप्रयोग (शून्य), document.getElementById ("कंटेनर ") वापसी –

+0

यह कथन वास्तव में क्या करता है? मेरी व्याख्या है: 'टाइपोफ विंडो! == "अपरिभाषित" && (विंडो। प्रतिक्रिया = प्रतिक्रिया)' नीचे उबलता है (मान लीजिए कि रिएक्ट लोड हो गया है): 'टाइप सही और सही' जो 'टाइप टाइप सही' है। जो 'बूलियन' है। http://www.w3schools.com/js/js_datatypes.asp तो क्या यह टेक्स्ट को डालने जैसा नहीं होगा: मेरी मुख्य स्रोत फ़ाइल के शीर्ष पर 'बूलियन'? –

+1

यह सिर्फ एक कथन के संक्षिप्त संस्करण के रूप में उपयोग किया जाता है। आपकी टिप्पणी में हर दावा गलत है। इसे 'if ((टाइपफ विंडो) के रूप में शब्दशः लिखा जा सकता है! == "अपरिभाषित") विंडो। प्रतिक्रिया = प्रतिक्रिया; '। 'typeof' की तुलना में' pre == 'की तुलना में अधिक प्राथमिकता है, && के बाद एक असाइनमेंट है, और' बूलियन '' बूलियन 'नामक चर को संदर्भित करेगा, जो संदर्भकर्ता का कारण बनता है। – FakeRainBrigand

3

वह संदेश हमेशा प्रदर्शित होता है, भले ही प्रतिक्रिया देव उपकरण स्थापित हो और वर्तमान पृष्ठ पर काम कर रहे हों। यह 0.12 में तय किया जाएगा (और मास्टर में पहले ही तय है)। https://github.com/facebook/react/pull/953 देखें।

+1

ठीक है .. जब मैं अपने आवेदन को डीबग करता हूं तो प्रतिक्रिया टैब दिखाई नहीं दे रहा है, ऐसा लगता है कि मुझे किसी भी तरह से यह एप्लिकेशन पहचानने के लिए है कि प्रतिक्रिया का उपयोग किया जा रहा है। –

+0

यदि आप सफल होते हैं तो क्या आप वापस रिपोर्ट कर सकते हैं? मैं वास्तव में इसके लिए एक अलग सवाल पूछ सकता हूं। खुशी के बिना खुले कई धागे हैं: https://github.com/facebook/react-devtools/issues/91 https://github.com/atom/electron/issues/915 – GreenAsJade

105

यदि आपने अपने ब्राउज़र में एक स्थानीय HTML फ़ाइल खोली है (फ़ाइल: // ...) तो आपको पहले क्रोम एक्सटेंशन खोलना होगा और "फ़ाइल यूआरएल तक पहुंच की अनुमति दें" को चेक करना होगा।

+0

मैं लिनक्स टकसाल 64 बिट पर हूं , उपर्युक्त निर्देशों का पालन किया गया है और फ़ाइल यूआरएल तक पहुंच की अनुमति दी गई है, मैंने इसे चालू कर दिया और फिर मेरा रिएक्ट टैब दिखाई दिया। मुझे सही दिशा में इंगित करने के बाद से यह मेरे लिए सही चिह्नित करना, मैंने अभी विपरीत किया और यह मेरे लिए काम किया। –

+2

यह नवीनतम ReactJs संस्करण 0.13.3 पर काम करता है। तो, आपके द्वारा 'फ़ाइल URL तक पहुंच की अनुमति दें' विकल्प चुनने के बाद। आपको टैब को बंद करने और टैब को दोबारा खोलने की भी आवश्यकता है (या फिर क्रोम को पुनरारंभ करें यदि आप अपने सभी मौजूदा टैब फिर से खोलना चाहते हैं)। – exodream

+0

यह त्रुटि को हल करता है, लेकिन वास्तव में प्रतिक्रिया टैब को प्रदर्शित नहीं करता है; जिसके लिए एक वेबसर्वर की आवश्यकता होती है: https://github.com/facebook/react-devtools/issues/172 – Sawtaytoes

2

यदि आप गुप्त मोड में हैं तो प्रतिक्रिया उपकरण भी काम नहीं करेंगे। किसी की मदद कर सकते हैं।

+1

वे काम करते हैं लेकिन आपको इसे क्रोम: // एक्सटेंशन/के अंतर्गत गुप्त में चलाने की अनुमति देना है, जैसे कि हर दूसरे एक्सटेंशन – ivarni

संबंधित मुद्दे