React Native में लॉग इन कैसे करें?


345

मैं console.logवेब के लिए विकसित होने के दौरान रिएक्ट नेटिव में एक चर कैसे दर्ज कर सकता हूं ?


आजमाएँ प्रतिक्रिया देशी-लॉग-ios NPM pkg, यह दूरस्थ जे एस डिबगिंग के बिना बॉक्स से बाहर काम करता है।
बॉबी

जवाबों:


325

console.log काम करता है।

IOS पर डिफ़ॉल्ट रूप से, यह Xcode के अंदर डिबग पेन में प्रवेश करता है।

IOS सिम्युलेटर प्रेस ( + D) से और रिमोट जेएस डिबगिंग दबाएं । यह एक संसाधन, http: // localhost: 8081 / debugger-ui स्थानीयहोस्ट पर खोलेगा। देखने के लिए क्रोम डेवलपर टूल्स जावास्क्रिप्ट कंसोल का उपयोग करेंconsole.log


47
और रिएक्टिव नेटिव के लिए परमाणु का उपयोग करके एंड्रॉइड में कंसोल लॉग कैसे प्रिंट करें?
रेतीला

3
@ कैंडी यह जवाब देखें । यह विशेष रूप से एटम के लिए नहीं है, लेकिन गैर XCode (उर्फ गैर
macOS

21
ध्यान दें कि प्रतिक्रियाशील मूल निवासी के रूप में 0.29 और बाद में, आप डिबगर को चलाने के बिना लॉग प्राप्त कर सकते हैं। बस अपने प्रोजेक्ट फ़ोल्डर के अंदर कमांड लाइन पर प्रतिक्रिया-देशी लॉग-आईओएस या प्रतिक्रिया-मूल लॉग-एंड्रॉइड चलाएं।
मार्टिन कोनिसक

1
और जब आप रिमोट जेएस डिबगिंग खोलते हैं, तो आपको विकल्प + कमांड + i दबाकर कंसोल को चेक करना होगा। पूरी तरह से आवश्यक जानकारी जो गायब थी और मुझे उलझन में थी।
सूडो

1
बस अपने ऐप के उत्पादन संस्करण में कंसोल याद रखें। आईओएस में अपने ऐप को क्रैश कर सकते हैं। इसलिए सुनिश्चित करें कि आप जाँच कर रहे हैं कि पर्यावरण विकास है या नहीं, इसे आप मूल निवासी प्रतिक्रिया में DEV वैश्विक चर द्वारा जान सकते हैं ।
यश ओझा

347

उपयोग console.log, console.warnआदि

प्रतिक्रियाशील मूल निवासी 0.29 के रूप में आप बस सांत्वना में लॉग देखने के लिए निम्नलिखित चला सकते हैं:

$ react-native log-ios
$ react-native log-android

2
यह बहुत मददगार है क्योंकि डिबगर शुरू करने से एनिमेशन स्लो हो जाता है।
१२:१२

13
ये काम नहीं कर रहा है। जब मैं react-native log-ios अविकसित-मैक-मिनी com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 (948] (com.apple.videosubsेंद्स) <नोटिस> सेवा चलाता हूं: मुझे केवल 0 सेकंड के लिए सेवा मिली। 10 सेकंड तक रिस्पना बाहर धक्का।
rptwsthi

@rptwsthi मुझे भी यही समस्या है। क्या आप इसे हल करने में सक्षम थे?
बेन

2
@Denis Kniazhev मुझे नहीं लगता कि केवल लॉग त्रुटियों का एक विकल्प है, लेकिन आप आउटपुट को फ़िल्टर कर सकते हैं। यदि आप मैक या लिनक्स पर हैं: प्रतिक्रिया-देशी लॉग-एंड्रॉइड | grep "त्रुटियों के लिए मेरा फ़िल्टर"।
मार्टिन कोनिसक

1
कंसोल.वरन ने मुझे कुछ चिंताओं की जाँच करने में मदद की।
माधवी जयसिंह

39

Pre React Native 0.29, इसे कंसोल में चलाएं:

adb logcat *:S ReactNative:V ReactNativeJS:V

पोस्ट रिएक्टिव नेटिव 0.29, रन:

react-native log-ios

या

react-native log-android

जैसा कि मार्टिन ने एक अन्य जवाब में कहा।

यह सभी कंसोल.लॉग (), त्रुटियां, नोट्स आदि दिखाता है और शून्य धीमा होने का कारण बनता है।


3
इस सरल विकल्प के लिए +1। मैंने समयावधि प्राप्त करने के लिए थोड़े भिन्न कमांड (मैं पढ़ने के बाद ठीक मैनुअल) का उपयोग करते हुए समाप्त किया:adb logcat -v time -s ReactNativeJS
स्पचटर

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

मैं महीनों से रिएक्टिव नेटिव डीबगर का उपयोग कर रहा हूं और यह सबग से बचने का सबसे अच्छा विकल्प है साबिर ने बताया: github.com/jhen0409/react-native-debugger
Fran Verona

36

उपयोग 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

2
किसी भी तरह से केवल filter.log से फ़िल्टर करने के लिए?

मेरे लिए काम नहीं करता है, मैं केवल जेनेरिक रिएक्ट नेटिव लॉग संदेश देखता हूं, जैसे कि Initializing React Xplat Bridge.
फिलिप लुडविग

21

विजुअल स्टूडियो कोड में एक अच्छा डीबग कंसोल है जो आपके कंसोल.लॉग दिखा सकता है।

यहां छवि विवरण दर्ज करें

वीएस कोड, रिएक्टिव नेटिव फ्रेंडली की तुलना में अधिक बार नहीं है।


6
क्या आप इस बारे में अधिक जानकारी दे सकते हैं कि कैसे वीएस कोड प्रतिक्रिया-मूल से डीबग आउटपुट प्राप्त कर सकता है। धन्यवाद!
mik123

डिवाइस पर अपने एप्लिकेशन से 'डीबग जेएस', और वीएस कोड पर अपने दृश्य मेनू से 'टॉगल डीबग कंसोल (शिफ्ट-कमांड-वाई)' का चयन करें। हालाँकि आपको github.com/Microsoft/vscode-react-native की आवश्यकता है ।
गुडहल

19

यह वह जगह है जहाँ Chrome Developer Tools आपका मित्र है।

निम्नलिखित कदम आपको Chrome डेवलपर टूल पर पहुंचने चाहिए, जहां आप अपने console.logस्टेटमेंट देख पाएंगे ।

कदम

  1. Google Chrome इंस्टॉल करें , अगर आपके पास पहले से नहीं है
  2. एप्लिकेशन का उपयोग करके चलाएं react-native run-androidयाreact-native run-ios
  3. डेवलपर मेनू खोलें
    • Mac: ⌘+D iOS के लिए या ⌘MAndroid iOS के लिए
    • विंडोज / लिनक्स: एंड्रॉयड फोन को हिलाएं
  4. चुनते हैं Debug JS Remotely
  5. इसे क्रोम में डीबगर को लॉन्च करना चाहिए
  6. Chrome में: Tools -> More Tools -> Developer Optionsऔर सुनिश्चित करें कि आप consoleटैब पर हैं

अब जब भी किसी console.logस्टेटमेंट को निष्पादित किया जाता है, तो उसे क्रोम देव टूल्स में दिखाई देना चाहिए। आधिकारिक प्रलेखन यहाँ है


2
यह विकास के दौरान ऐप के प्रदर्शन को धीमा कर सकता है।
एंड्रियन पेक्सन

17

प्रतिक्रियाशील मूल एप्लिकेशन विकसित करते समय डीबग करने के लिए 3 विधियाँ हैं:

  1. console.log(): कंसोल में दिखाता है
  2. console.warn(): आवेदन के नीचे पीले बॉक्स में दिखाता है
  3. alert(): एक संकेत के रूप में दिखाता है जैसे यह वेब में होता है

6

मैं प्रतिक्रियाशील मूल निवासी डिबगर का उपयोग करके आप लोगों की सिफारिश करना पसंद करता हूं। आप इस कमांड का उपयोग करके इसे डाउनलोड और इंस्टॉल कर सकते हैं।

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"
परतदार

3

मेरे पास एक ही मुद्दा था: 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स्थानीय होस्ट करने के लिए (मैंने किया था!)।


3

Xcode सिम्युलेटर में [कमांड + कंट्रोल + जेड] दबाएं, डीबग जेएस रिमोट को चुनें, फिर क्रोम डेवलपर टूल खोलने के लिए [कमांड + विकल्प + जे] दबाएं।

Xcode सिम्युलेटर Img

संदर्भ :प्रतिक्रियाशील मूल निवासी एप्लिकेशन डिबगिंग


3

इसकी इतनी सरल प्रतिक्रिया-मूल में लॉग पाने के लिए

कंसोल.लॉग और कंसोल का उपयोग करें

console.log('character', parameter)

console.warn('character', parameter)

यह लॉग आप ब्राउज़र कंसोल में देख सकते हैं। यदि आप डिवाइस लॉग की जांच करना चाहते हैं या प्रोडक्शन एपीके लॉग की जांच करना चाहते हैं

adb logcat

adb -d logcat

ADB console.logऔर console.warnकथनों को छोड़कर सब कुछ ADB पर दिखाई देता है ।
एंड्रयू कोस्टर

हां @AndrewKoster मैं आपसे सहमत हूं, हम ADB के साथ सभी लॉग देख सकते हैं लेकिन यह आपको डिवाइस लॉग देता है कि क्वेरी वेब डेवलपमेंट लॉगिंग से संबंधित है। एडीबी आपको डिवाइस लॉग देता है साथ ही आप डिवाइस कॉन्फ़िगरेशन को नियंत्रित और जांच सकते हैं। आप ADB कमांड्स के bellow लिंक से जानकारी एकत्र कर सकते हैं जो विकास के दौरान आपकी मदद कर सकता है। androidcentral.com/10-basic-terminal-commands-you-should-know
jatin.7744

2

प्रतिक्रिया-मूल-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');

2

विकास समय लॉगिंग

विकास समय लॉगिंग के लिए, आप उपयोग कर सकते हैं कंसोल.लॉग () का। एक महत्वपूर्ण बात, यदि आप उत्पादन मोड में लॉगिंग को अक्षम करना चाहते हैं, तो ऐप के रूट जेएस फ़ाइल में, बस इस तरह रिक्त कार्य असाइन करें - कंसोल.लॉग = {} यह संपूर्ण लॉग प्रकाशन को पूरी तरह से अक्षम कर देगा, जो वास्तव में उत्पादन में आवश्यक है कंसोल के रूप में मोड। समय की खपत करता है।


रन टाइम लॉगिंग

उत्पादन मोड में, लॉग को देखना तब भी आवश्यक है जब वास्तविक उपयोगकर्ता आपके ऐप का वास्तविक समय में उपयोग कर रहे हों। इससे बग, उपयोग और अवांछित मामलों को समझने में मदद मिलती है। इसके लिए बाजार में कई 3rd पार्टी पेड टूल्स उपलब्ध हैं। उनमें से एक जो मैंने उपयोग किया है वह है लॉजेन्ट्रीज़

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


2

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

बेशक, आपको उस बॉयलरप्लेट के साथ एक नया प्रोजेक्ट बनाना होगा ... लेकिन अगर आपको अपनी फ़ाइलों को स्थानांतरित करने की आवश्यकता है, तो यह समस्या नहीं होनी चाहिए। इसे आजमा कर देखें।

संपादित करें: वास्तव में इसके लिए कैमरे की भी आवश्यकता नहीं होती है। मैंने कहा कि एक क्यूआर कोड को स्कैन करने के लिए, लेकिन आप अपने सर्वर के साथ सिंक करने के लिए कुछ भी टाइप कर सकते हैं, न कि केवल एक क्यूआर कोड।


2

उपयोग करते समय अपनी प्रतिक्रिया देशी एप्लिकेशन को डिबग करने या आउटपुट प्राप्त करने के दो विकल्प हैं

एमुलेटर या रियल डिवाइस

पहले एमुलेटर का उपयोग करने के लिए: उपयोग करें

प्रतिक्रिया-मूल लॉग-एंड्रॉइड या प्रतिक्रिया-मूल लॉग-आईओएस

लॉग आउटपुट प्राप्त करने के लिए

असली डिवाइस पर। अपने डिवाइस को हटा दें

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


2

यहां छवि विवरण दर्ज करेंलॉगिंग और रिड्यूस स्टोर के लिए देशी डिबगर का उपयोग करें https://github.com/jhen0409/react-native-dugugg

बस इसे डाउनलोड करें और सॉफ्टवेयर के रूप में चलाएं फिर सिम्युलेटर से डीबग मोड को सक्षम करें।

यह क्रोम डेवलपर टूल में तत्व की तरह अन्य डिबगिंग सुविधा का समर्थन करता है, जो किसी भी घटक को प्रदान की गई स्टाइल को देखने में मदद करता है।

Redux dev टूल्स के लिए अंतिम पूर्ण समर्थन


2
  1. console.log("My log text")अपने कोड में डालें
  2. अपने कमांड लाइन टूल पर जाएं
  3. अपने विकास फ़ोल्डर में अपने आप को स्थिति

Android में:

  • इस आदेश को लिखें: प्रतिक्रिया-मूल लॉग-एंड्रॉइड

IOS में:

  • इस कमांड को लिखें: React-native log-ios

1

आप अपने डिवाइस से रिमोट जेएस डिबगली विकल्प का उपयोग कर सकते हैं या आप बस प्रतिक्रिया-देशी लॉग-एंड्रॉइड और आईओएस के लिए प्रतिक्रिया-मूल लॉग-आईओएस का उपयोग कर सकते हैं ।


1

कंसोल.लॉग () आपके कोड को डीबग करने का आसान तरीका है, लेकिन इसे किसी भी राज्य को प्रदर्शित करते समय तीर फ़ंक्शन या बाइंड () के साथ उपयोग करने की आवश्यकता है। आपको लिंक उपयोगी मिल सकता है।


1

आप इसे 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);

1

विंडोज और एंड्रॉइड स्टूडियो वाले उपयोगकर्ता:

आप इसे Android स्टूडियो में Logcat के तहत खोजने जा रहे हैं। बहुत सारे लॉगिंग संदेश हैं जो यहां दिखाई देते हैं, इसलिए आपके लिए "ReactNativeJS" के लिए एक फ़िल्टर बनाना आसान हो सकता है जो केवल आपके कंसोल.लॉग संदेश को दिखाएगा जो आपकी प्रतिक्रिया देशी एप्लिकेशन के अंदर बनाए गए हैं।


1

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

  1. कंसोल.लॉग के साथ डिबगिंग
  2. न्यूक्लाइड के साथ कोड (तर्क) डिबगिंग
  3. क्रोम के साथ डिबगिंग कोड (तर्क)
  4. GUI डीबग करने के लिए Xcode का उपयोग करें

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4



1

इसे प्राप्त करने के कई तरीके हैं, मैं उन्हें सूचीबद्ध कर रहा हूं और उनका उपयोग करने में विपक्ष भी शामिल हूं। आप उपयोग कर सकते हैं:

  1. console.logऔर देव उपकरण, एंड्रॉइड स्टूडियो और Xcode से दूरस्थ डिबगिंग विकल्प का चयन किए बिना लॉगिंग स्टेटमेंट देखें। या आप दूरस्थ डिबगिंग विकल्प के लिए विकल्प चुन सकते हैं और क्रोम देव उपकरण या vscode या किसी अन्य संपादक पर लॉगिंग देख सकते हैं जो डीबगिंग का समर्थन करता है, आपको सतर्क रहना होगा क्योंकि यह पूरी प्रक्रिया को धीमा कर देगा।
  2. आप उपयोग कर सकते हैं console.warnलेकिन तब आपकी मोबाइल स्क्रीन उन अजीब पीले बक्से से भर जाएगी जो आपकी स्थिति के अनुसार संभव नहीं हो सकते हैं।
  3. सबसे प्रभावी तरीका जो मुझे आया था वह है थर्ड पार्टी टूल, रेक्टोट्रॉन का उपयोग करना । एक सरल और आसान उपकरण कॉन्फ़िगर करना जो आपको विभिन्न स्तरों (त्रुटि, डीबग, चेतावनी, आदि) के प्रत्येक लॉगिंग स्टेटमेंट को देखने में सक्षम बनाता है। यह आपको GUI टूल प्रदान करता है जो प्रदर्शन को धीमा किए बिना आपके ऐप के सभी लॉगिंग को दिखाता है।

1

आप उसी चीज़ का उपयोग करते हैं जिसका उपयोग नियमित वेब के लिए किया जाता है। consoleआदेश भी इस मामले में काम करता है। उदाहरण के लिए, आप उपयोग कर सकते हैं console.log(), console.warn(), console.clear()आदि

consoleजब आप अपना रिएक्टिव नेटिव ऐप चला रहे हों तो आप लॉग इन करते समय कमांड का उपयोग करने के लिए क्रोम डेवलपर का उपयोग कर सकते हैं ।


0

console.log() जब आप अपने डेवलपर मेनू से दूरस्थ js डीबगर का उपयोग करते हैं तो कंसोल पर अपना लॉग देखने का सबसे अच्छा और सरल तरीका है



0

यदि आप ओएक्सएक्स पर हैं और एक एमुलेटर का उपयोग कर रहे हैं, तो आप अपने console.logएस को सीधे सफारी वेब इंस्पेक्टर में देख सकते हैं ।

सफारी => विकास => सिम्युलेटर - [आपका सिम्युलेटर संस्करण यहां] => जेएससीऑनटेक्स्ट


0

आम तौर पर दो परिदृश्य हैं जहां हमें डीबगिंग की आवश्यकता होती है।

  1. जब हम डेटा से संबंधित समस्याओं का सामना कर रहे हैं और हम उस मामले में डेटा से संबंधित हमारे डेटा और डिबगिंग की जांच करना चाहते हैं console.log('data::',data)

    और डीबग जेएस दूरस्थ रूप से सबसे अच्छा विकल्प है।

  2. अन्य मामला UI और शैलियों से संबंधित मुद्दे हैं, जहां हमें घटक की स्टाइलिंग की जांच करने की आवश्यकता है, उस स्थिति में प्रतिक्रिया-देव-उपकरण सबसे अच्छा विकल्प है।

    दोनों विधियों का उल्लेख यहाँ है।


0

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.