मैं console.log
वेब के लिए विकसित होने के दौरान रिएक्ट नेटिव में एक चर कैसे दर्ज कर सकता हूं ?
मैं console.log
वेब के लिए विकसित होने के दौरान रिएक्ट नेटिव में एक चर कैसे दर्ज कर सकता हूं ?
जवाबों:
console.log
काम करता है।
IOS पर डिफ़ॉल्ट रूप से, यह Xcode के अंदर डिबग पेन में प्रवेश करता है।
IOS सिम्युलेटर प्रेस ( ⌘+ D) से और रिमोट जेएस डिबगिंग दबाएं । यह एक संसाधन, http: // localhost: 8081 / debugger-ui स्थानीयहोस्ट पर खोलेगा। देखने के लिए क्रोम डेवलपर टूल्स जावास्क्रिप्ट कंसोल का उपयोग करेंconsole.log
उपयोग console.log
, console.warn
आदि
प्रतिक्रियाशील मूल निवासी 0.29 के रूप में आप बस सांत्वना में लॉग देखने के लिए निम्नलिखित चला सकते हैं:
$ react-native log-ios
$ react-native log-android
react-native log-ios
अविकसित-मैक-मिनी com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 (948] (com.apple.videosubsेंद्स) <नोटिस> सेवा चलाता हूं: मुझे केवल 0 सेकंड के लिए सेवा मिली। 10 सेकंड तक रिस्पना बाहर धक्का।
Pre React Native 0.29, इसे कंसोल में चलाएं:
adb logcat *:S ReactNative:V ReactNativeJS:V
पोस्ट रिएक्टिव नेटिव 0.29, रन:
react-native log-ios
या
react-native log-android
जैसा कि मार्टिन ने एक अन्य जवाब में कहा।
यह सभी कंसोल.लॉग (), त्रुटियां, नोट्स आदि दिखाता है और शून्य धीमा होने का कारण बनता है।
adb logcat -v time -s ReactNativeJS
उपयोग console.debug("text");
आप टर्मिनल के अंदर लॉग देखेंगे।
कदम:
react-native run-ios # For iOS
react-native run-android # For Android
react-native log-ios # For iOS
react-native log-android # For Android
Initializing React Xplat Bridge.
।
विजुअल स्टूडियो कोड में एक अच्छा डीबग कंसोल है जो आपके कंसोल.लॉग दिखा सकता है।
वीएस कोड, रिएक्टिव नेटिव फ्रेंडली की तुलना में अधिक बार नहीं है।
यह वह जगह है जहाँ Chrome Developer Tools आपका मित्र है।
निम्नलिखित कदम आपको Chrome डेवलपर टूल पर पहुंचने चाहिए, जहां आप अपने console.log
स्टेटमेंट देख पाएंगे ।
react-native run-android
याreact-native run-ios
⌘+D
iOS के लिए या ⌘M
Android iOS के लिएDebug JS Remotely
Tools -> More Tools -> Developer Options
और सुनिश्चित करें कि आप console
टैब पर हैंअब जब भी किसी console.log
स्टेटमेंट को निष्पादित किया जाता है, तो उसे क्रोम देव टूल्स में दिखाई देना चाहिए। आधिकारिक प्रलेखन यहाँ है ।
प्रतिक्रियाशील मूल एप्लिकेशन विकसित करते समय डीबग करने के लिए 3 विधियाँ हैं:
console.log()
: कंसोल में दिखाता हैconsole.warn()
: आवेदन के नीचे पीले बॉक्स में दिखाता हैalert()
: एक संकेत के रूप में दिखाता है जैसे यह वेब में होता हैमैं प्रतिक्रियाशील मूल निवासी डिबगर का उपयोग करके आप लोगों की सिफारिश करना पसंद करता हूं। आप इस कमांड का उपयोग करके इसे डाउनलोड और इंस्टॉल कर सकते हैं।
brew update && brew cask install react-native-debugger
या
बस नीचे दिए गए लिंक की जाँच करें।
https://github.com/jhen0409/react-native-debugger
हैप्पी हैकिंग!
start
यह डिबगर को खोलेगा क्योंकि आप क्रोम के बजाय डिफॉल्ट डिबगर करते हैं और -g
ध्वज इसे पुनः लोड करने पर ध्यान केंद्रित करने से रोक देगा। "start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start"
मेरे पास एक ही मुद्दा था: XCode के डिबग क्षेत्र में कंसोल संदेश दिखाई नहीं दे रहे थे। अपने ऐप में मैंने डिबग मेनू लाने के लिए cmd-d किया, और याद किया कि मैंने "डीबग इन सफारी" सेट किया था।
मैंने इसे बंद कर दिया, और कुछ संदेश आउटपुट संदेश पर मुद्रित किए गए थे, लेकिन मेरे कंसोल संदेश नहीं थे। हालाँकि, लॉग संदेशों में से एक ने कहा:
__DEV__ === false, development-level warning are OFF, performance optimizations are ON"
ऐसा इसलिए था क्योंकि मैंने पहले कमांड के साथ वास्तविक डिवाइस पर परीक्षण के लिए अपनी परियोजना को बंडल किया था:
react-native bundle --minify
इस पर "देव-विधा" के बिना बंडल किया गया। देव संदेशों की अनुमति देने के लिए, --देव ध्वज शामिल करें:
react-native bundle --dev
और कंसोल.लॉग संदेश वापस आ गए हैं! आप एक असली डिवाइस के लिए बंडल नहीं हैं, तो फिर से बात करने के लिए मत भूलना jsCodeLocation
में AppDelegate.m
स्थानीय होस्ट करने के लिए (मैंने किया था!)।
Xcode सिम्युलेटर में [कमांड + कंट्रोल + जेड] दबाएं, डीबग जेएस रिमोट को चुनें, फिर क्रोम डेवलपर टूल खोलने के लिए [कमांड + विकल्प + जे] दबाएं।
इसकी इतनी सरल प्रतिक्रिया-मूल में लॉग पाने के लिए
कंसोल.लॉग और कंसोल का उपयोग करें
console.log('character', parameter)
console.warn('character', parameter)
यह लॉग आप ब्राउज़र कंसोल में देख सकते हैं। यदि आप डिवाइस लॉग की जांच करना चाहते हैं या प्रोडक्शन एपीके लॉग की जांच करना चाहते हैं
adb logcat
adb -d logcat
console.log
और console.warn
कथनों को छोड़कर सब कुछ ADB पर दिखाई देता है ।
प्रतिक्रिया-मूल-xlog मॉड्यूल जो आपकी सहायता कर सकता है, प्रतिक्रिया-मूल के लिए WeChat का Xlog है। यह Xcode कंसोल और लॉग फ़ाइल में आउटपुट कर सकता है, उत्पाद लॉग फ़ाइलें आपको डीबग करने में मदद कर सकती हैं।
Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');
विकास समय लॉगिंग
विकास समय लॉगिंग के लिए, आप उपयोग कर सकते हैं कंसोल.लॉग () का। एक महत्वपूर्ण बात, यदि आप उत्पादन मोड में लॉगिंग को अक्षम करना चाहते हैं, तो ऐप के रूट जेएस फ़ाइल में, बस इस तरह रिक्त कार्य असाइन करें - कंसोल.लॉग = {} यह संपूर्ण लॉग प्रकाशन को पूरी तरह से अक्षम कर देगा, जो वास्तव में उत्पादन में आवश्यक है कंसोल के रूप में मोड। समय की खपत करता है।
रन टाइम लॉगिंग
उत्पादन मोड में, लॉग को देखना तब भी आवश्यक है जब वास्तविक उपयोगकर्ता आपके ऐप का वास्तविक समय में उपयोग कर रहे हों। इससे बग, उपयोग और अवांछित मामलों को समझने में मदद मिलती है। इसके लिए बाजार में कई 3rd पार्टी पेड टूल्स उपलब्ध हैं। उनमें से एक जो मैंने उपयोग किया है वह है लॉजेन्ट्रीज़
अच्छी बात यह है कि लॉजेंट्रीज को रिएक्ट नेटिव मॉड्यूल भी मिला है । इसलिए, आपको अपने मोबाइल ऐप से रन टाइम लॉगिंग को सक्षम करने में बहुत कम समय लगेगा।
एक्सपो ऐप का उपयोग करके आपका ऐप आपके मोबाइल डिवाइस (किसी भी कैमरे के साथ) पर कैसा दिखता है, यह दिखाने के लिए एक शानदार बॉयलरप्लेट जो आपको (न्यूनतम प्रयास के साथ) अनुमति देता है, के बारे में एक महीने पहले ही सामने आया कुछ ऐसा है जो एक भयानक बॉयलरप्लेट है। । इसमें न केवल लाइव अपडेट हैं, बल्कि यह आपके टर्मिनल में कंसोल लॉग को वेब की तरह विकसित होने पर देखने की अनुमति देगा , ब्राउज़र का उपयोग करने के बजाय जैसे हमने पहले रिएक्ट नेटिव के साथ किया था।
बेशक, आपको उस बॉयलरप्लेट के साथ एक नया प्रोजेक्ट बनाना होगा ... लेकिन अगर आपको अपनी फ़ाइलों को स्थानांतरित करने की आवश्यकता है, तो यह समस्या नहीं होनी चाहिए। इसे आजमा कर देखें।
संपादित करें: वास्तव में इसके लिए कैमरे की भी आवश्यकता नहीं होती है। मैंने कहा कि एक क्यूआर कोड को स्कैन करने के लिए, लेकिन आप अपने सर्वर के साथ सिंक करने के लिए कुछ भी टाइप कर सकते हैं, न कि केवल एक क्यूआर कोड।
उपयोग करते समय अपनी प्रतिक्रिया देशी एप्लिकेशन को डिबग करने या आउटपुट प्राप्त करने के दो विकल्प हैं
एमुलेटर या रियल डिवाइस
पहले एमुलेटर का उपयोग करने के लिए: उपयोग करें
प्रतिक्रिया-मूल लॉग-एंड्रॉइड या प्रतिक्रिया-मूल लॉग-आईओएस
लॉग आउटपुट प्राप्त करने के लिए
असली डिवाइस पर। अपने डिवाइस को हटा दें
इसलिए मेनू आएगा जहां से आप दूरस्थ डिबग का चयन करते हैं और यह आपके ब्राउज़र में इस स्क्रीन को खोलेगा। इसलिए आप कंसोल लॉग में अपना लॉग आउटपुट देख सकते हैं।
लॉगिंग और रिड्यूस स्टोर के लिए देशी डिबगर का उपयोग करें https://github.com/jhen0409/react-native-dugugg
बस इसे डाउनलोड करें और सॉफ्टवेयर के रूप में चलाएं फिर सिम्युलेटर से डीबग मोड को सक्षम करें।
यह क्रोम डेवलपर टूल में तत्व की तरह अन्य डिबगिंग सुविधा का समर्थन करता है, जो किसी भी घटक को प्रदान की गई स्टाइल को देखने में मदद करता है।
Redux dev टूल्स के लिए अंतिम पूर्ण समर्थन
console.log("My log text")
अपने कोड में डालेंAndroid में:
IOS में:
कंसोल.लॉग () आपके कोड को डीबग करने का आसान तरीका है, लेकिन इसे किसी भी राज्य को प्रदर्शित करते समय तीर फ़ंक्शन या बाइंड () के साथ उपयोग करने की आवश्यकता है। आपको लिंक उपयोगी मिल सकता है।
आप इसे 2 तरीकों से कर सकते हैं
1> चेतावनी का उपयोग करके
console.warn("somthing " +this.state.Some_Sates_of_variables);
2> अलर्ट का उपयोग करके यह हर बार अच्छा नहीं होता है अगर यह अलर्ट पर पहुंच जाता है तो हर बार पॉप खुल जाएगा इसलिए यदि लूपिंग का मतलब यह उपयोग करने के लिए बेहतर नहीं है
Import the {Alert} from 'react-native'
// use this alert
Alert.alert("somthing " +this.state.Some_Sates_of_variables);
विंडोज और एंड्रॉइड स्टूडियो वाले उपयोगकर्ता:
आप इसे Android स्टूडियो में Logcat के तहत खोजने जा रहे हैं। बहुत सारे लॉगिंग संदेश हैं जो यहां दिखाई देते हैं, इसलिए आपके लिए "ReactNativeJS" के लिए एक फ़िल्टर बनाना आसान हो सकता है जो केवल आपके कंसोल.लॉग संदेश को दिखाएगा जो आपकी प्रतिक्रिया देशी एप्लिकेशन के अंदर बनाए गए हैं।
प्रत्येक डेवलपर प्रतिक्रिया के मूल के साथ डिबगिंग के इस मुद्दे का सामना कर रहा है, यहां तक कि मैंने भी सामना किया है और मैं इसका उल्लेख करता हूं और प्रारंभिक स्तर पर मेरे लिए समाधान पर्याप्त है, यह कुछ तरीकों को कवर करता है जो हमें कोशिश करने और हमारे साथ कभी आराम करने के लिए उपयोग करने में मदद करते हैं।
https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
आप रीक्टोट्रॉन का भी उपयोग कर सकते हैं, यह आपको लॉगिंग की तुलना में बहुत अधिक कार्यक्षमता देगा। https://github.com/infinitered/reactotron
इसे प्राप्त करने के कई तरीके हैं, मैं उन्हें सूचीबद्ध कर रहा हूं और उनका उपयोग करने में विपक्ष भी शामिल हूं। आप उपयोग कर सकते हैं:
console.log
और देव उपकरण, एंड्रॉइड स्टूडियो और Xcode से दूरस्थ डिबगिंग विकल्प का चयन किए बिना लॉगिंग स्टेटमेंट देखें। या आप दूरस्थ डिबगिंग विकल्प के लिए विकल्प चुन सकते हैं और क्रोम देव उपकरण या vscode या किसी अन्य संपादक पर लॉगिंग देख सकते हैं जो डीबगिंग का समर्थन करता है, आपको सतर्क रहना होगा क्योंकि यह पूरी प्रक्रिया को धीमा कर देगा।console.warn
लेकिन तब आपकी मोबाइल स्क्रीन उन अजीब पीले बक्से से भर जाएगी जो आपकी स्थिति के अनुसार संभव नहीं हो सकते हैं।आप उसी चीज़ का उपयोग करते हैं जिसका उपयोग नियमित वेब के लिए किया जाता है। console
आदेश भी इस मामले में काम करता है। उदाहरण के लिए, आप उपयोग कर सकते हैं console.log()
, console.warn()
,
console.clear()
आदि
console
जब आप अपना रिएक्टिव नेटिव ऐप चला रहे हों तो आप लॉग इन करते समय कमांड का उपयोग करने के लिए क्रोम डेवलपर का उपयोग कर सकते हैं ।
console.log()
जब आप अपने डेवलपर मेनू से दूरस्थ js डीबगर का उपयोग करते हैं तो कंसोल पर अपना लॉग देखने का सबसे अच्छा और सरल तरीका है
यदि आप ओएक्सएक्स पर हैं और एक एमुलेटर का उपयोग कर रहे हैं, तो आप अपने console.log
एस को सीधे सफारी वेब इंस्पेक्टर में देख सकते हैं ।
सफारी => विकास => सिम्युलेटर - [आपका सिम्युलेटर संस्करण यहां] => जेएससीऑनटेक्स्ट
आम तौर पर दो परिदृश्य हैं जहां हमें डीबगिंग की आवश्यकता होती है।
जब हम डेटा से संबंधित समस्याओं का सामना कर रहे हैं और हम उस मामले में डेटा से संबंधित हमारे डेटा और डिबगिंग की जांच करना चाहते हैं
console.log('data::',data)
और डीबग जेएस दूरस्थ रूप से सबसे अच्छा विकल्प है।
अन्य मामला UI और शैलियों से संबंधित मुद्दे हैं, जहां हमें घटक की स्टाइलिंग की जांच करने की आवश्यकता है, उस स्थिति में प्रतिक्रिया-देव-उपकरण सबसे अच्छा विकल्प है।
कंसोल.लॉग का उपयोग किसी भी जेएस परियोजना के लिए किया जा सकता है। यदि आप लोकलहोस्ट में ऐप चला रहे हैं तो जाहिर है कि यह किसी भी जावास्क्रिप्ट प्रोजेक्ट की तरह ही है। लेकिन सिम्युलेटर या किसी भी डिवाइस का उपयोग करते समय, उस सिम्युलेटर को हमारे लोकलहोस्ट से कनेक्ट करें और हम कंसोल में देख सकते हैं।