console.log
ওয়েবের জন্য বিকাশকালে ব্যবহারের মতো আমি কীভাবে প্রতিক্রি নেটিভটিতে একটি পরিবর্তনশীল লগ করতে পারি ?
console.log
ওয়েবের জন্য বিকাশকালে ব্যবহারের মতো আমি কীভাবে প্রতিক্রি নেটিভটিতে একটি পরিবর্তনশীল লগ করতে পারি ?
উত্তর:
console.log
কাজ করে।
আইওএস-এ ডিফল্টরূপে, এটি এক্সকোডের ভিতরে ডিবাগ ফলকে লগ ইন করে।
আইওএস সিমুলেটর থেকে ( ⌘+ D) চাপুন এবং রিমোট জেএস ডিবাগিং টিপুন । এটি লোকালহোস্টে একটি সংস্থান খুলবে : http: // লোকালহোস্ট: 8081 / ডিবাগার-ইউআই । সেখান থেকে Chrome বিকাশকারী সরঞ্জামগুলি দেখতে জাভাস্ক্রিপ্ট কনসোল ব্যবহার করুন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.videosubsificationsd) <নোটিস>: পরিষেবাটি কেবল 0 সেকেন্ডের জন্য চলত। দশ সেকেন্ডের মধ্যে রেসনকে পুশ করা হচ্ছে।
প্রাক প্রতিক্রিয়া নেটিভ 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 বিকাশকারী সরঞ্জামগুলিতে নিয়ে যাওয়া উচিত, যেখানে আপনি নিজের console.log
বিবৃতি দেখতে সক্ষম হবেন ।
react-native run-android
বা ব্যবহার করে অ্যাপ্লিকেশন চালানreact-native run-ios
⌘+D
আইওএসের জন্য বা ⌘M
অ্যান্ড্রয়েড আইওএসের জন্যDebug JS Remotely
Tools -> More Tools -> Developer Options
এবং আপনি console
ট্যাবে আছেন তা নিশ্চিত করুনএখন যখনই কোনও console.log
বিবৃতি কার্যকর করা হয় তখন তা Chrome ডি সরঞ্জামগুলিতে উপস্থিত হওয়া উচিত। অফিসিয়াল ডকুমেন্টেশন এখানে ।
রিয়েট নেটিভ অ্যাপ্লিকেশনগুলি বিকাশ করার সময় আমি ডিবাগ করার জন্য 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"
আমার একই সমস্যা ছিল: এক্সকোডের ডিবাগ অঞ্চলে কনসোল বার্তা উপস্থিত হচ্ছিল না। আমার অ্যাপে আমি ডিবিগ মেনু আনার জন্য সিএমডি-ডি করেছি, এবং মনে আছে যে আমি "সাফারিতে ডিবাগ" চালু করেছি।
আমি এটি বন্ধ করে দিয়েছি এবং কিছু বার্তা আউটপুট বার্তায় মুদ্রিত হয়েছিল, তবে আমার কনসোল বার্তাগুলি নয়। তবে লগ বার্তাগুলির মধ্যে একটি বলেছে:
__DEV__ === false, development-level warning are OFF, performance optimizations are ON"
কারণ এর আগে আমি কমান্ডটি দিয়ে সত্যিকারের ডিভাইসে পরীক্ষার জন্য আমার প্রকল্পটি বান্ডিল করেছি:
react-native bundle --minify
এটি "ডেভ-মোড" ছাড়াই বান্ডিল হয়েছে। দেব বার্তাগুলি অনুমোদনের জন্য - - দেব পতাকাটি অন্তর্ভুক্ত করুন:
react-native bundle --dev
এবং কনসোল.লগ বার্তা ফিরে এসেছে! আপনি যদি সত্যিকারের ডিভাইসটির জন্য বান্ডিল jsCodeLocation
না AppDelegate.m
করেন তবে লোকালহোস্টে পুনরায় নির্দেশ করতে ভুলবেন না (আমি করেছি!)।
এক্সকোড সিমুলেটরে [কমান্ড + নিয়ন্ত্রণ + জেড] টিপুন, ডিবাগ জেএস রিমোটলি চয়ন করুন, তারপরে Chrome বিকাশকারী সরঞ্জাম খোলার জন্য [কমান্ড + বিকল্প + জে] টিপুন।
প্রতিক্রিয়া-নেটিভ লগ পেতে এটি এত সহজ simple
কনসোল.লগ এবং কনসোল.ওয়ার্ন ব্যবহার করুন
console.log('character', parameter)
console.warn('character', parameter)
এই লগটি আপনি ব্রাউজার কনসোলে দেখতে পারেন। আপনি যদি ডিভাইস লগটি পরীক্ষা করতে চান বা প্রযোজনা APK লগ বলতে চান তবে আপনি ব্যবহার করতে পারেন
adb logcat
adb -d logcat
console.log
এবং console.warn
বিবৃতি বাদে সবকিছু এডিবিতে প্রদর্শিত হয় ।
রিএ্যাক্ট-নেটিভ-এক্সলগ মডিউল যা আপনাকে সহায়তা করতে পারে, তা হ'ল রিএ্যাকটিভ - নেটিভের জন্য ওয়েচ্যাটের এক্সলগ । এটি এক্সকোড কনসোল এবং লগ ফাইলে আউটপুট দিতে পারে, পণ্য লগ ফাইলগুলি আপনাকে ডিবাগ করতে সহায়তা করতে পারে।
Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');
ডেভলপমেন্ট টাইম লগিং
বিকাশের সময় লগিংয়ের জন্য, আপনি কনসোল.লগ () ব্যবহার করতে পারেন । একটি গুরুত্বপূর্ণ বিষয়, আপনি যদি প্রডাকশন মোডে লগিং নিষ্ক্রিয় করতে চান, তবে অ্যাপের রুট জেএস ফাইলগুলিতে কেবল ফাঁকা ফাংশন নির্ধারণ করুন - কনসোল.লগ =}} অ্যাপ্লিকেশনটিতে পুরো লগ প্রকাশনা সম্পূর্ণরূপে অক্ষম করে দেবে, যা প্রকৃতপক্ষে উত্পাদনে প্রয়োজনীয় মোড কনসোল.লগ হিসাবে সময় ব্যয় করে।
রান টাইম লগিং
উত্পাদনের মোডে, বাস্তব ব্যবহারকারীগণ যখন রিয়েল টাইমে আপনার অ্যাপ্লিকেশন ব্যবহার করছেন তখন লগগুলিও দেখতে হবে। এটি বাগ, ব্যবহার এবং অযাচিত ক্ষেত্রে বুঝতে সহায়তা করে। এর জন্য বাজারে অনেকগুলি তৃতীয় পক্ষের প্রদত্ত সরঞ্জাম রয়েছে। তাদের মধ্যে একটি যা আমি ব্যবহার করেছি তা লজেন্টরিজ
ভালো কথা হ'ল লজেন্টরিজগুলিও পেয়ে গেছে নেটিভ মডিউলটিও । সুতরাং, আপনার মোবাইল অ্যাপ্লিকেশনটির সাথে রান টাইম লগিং সক্ষম করতে আপনার খুব কম সময় লাগবে।
সবেমাত্র এক মাস আগে বেরিয়ে এসেছিল এমন কিছু হ'ল "প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশন তৈরি করুন" একটি দুর্দান্ত একটি বয়লারপ্লেট যা এক্সপো অ্যাপ্লিকেশনটি ব্যবহার করে আপনার অ্যাপ্লিকেশনটিকে আপনার মোবাইল ডিভাইসে (কোনও ক্যামেরা সহ কোনও) লাইভ দেখতে কেমন তা দেখানোর অনুমতি দেয় (সর্বনিম্ন প্রচেষ্টা দিয়ে) allows । এটিতে কেবল লাইভ আপডেট হয় না, তবে এটি আপনাকে আগে যেমন রিএ্যাক্ট নেটিভের মতো করে ব্রাউজারটি ব্যবহার না করে বরং ওয়েবের জন্য বিকাশ করার সময় আপনার টার্মিনালে কনসোল লগগুলি দেখতে দেয় ।
অবশ্যই, আপনাকে সেই বয়লারপ্লেট দিয়ে একটি নতুন প্রকল্প তৈরি করতে হবে ... তবে আপনার যদি আপনার ফাইলগুলি ওপরে স্থানান্তরিত করতে হয় তবে সমস্যা হবে না। ইহাকে একটি লাথি দাও.
সম্পাদনা: আসলে এটির জন্য ক্যামেরাও লাগবে না। আমি বলেছিলাম যে কোনও কিউআর কোড স্ক্যান করার জন্য, তবে আপনি এটি কেবল একটি QR কোড নয়, আপনার সার্ভারের সাথে সিঙ্ক করতে কিছু টাইপ করতে পারেন।
ডিবাগ করার বা ব্যবহার করার সময় আপনার প্রতিক্রিয়ার নেটিভ অ্যাপ্লিকেশনটির আউটপুট পাওয়ার দুটি বিকল্প রয়েছে
এমুলেটর বা রিয়েল ডিভাইস
প্রথম ব্যবহারের জন্য এমুলেটর: ব্যবহার করুন
নেটিভ লগ-অ্যান্ড্রয়েডকে প্রতিক্রিয়া জানান বা দেশীয় লগ-আইওসের প্রতিক্রিয়া জানান
লগ আউটপুট পেতে
আসল ডিভাইসে.আপনার ডিভাইসটি ঝাঁকুন
সুতরাং মেনুটি আসবে সেখান থেকে আপনি দূরবর্তী ডিবাগটি নির্বাচন করেন এবং এটি আপনার ব্রাউজারে এই স্ক্রিনটি খুলবে। যাতে আপনি কনসোল ট্যাবে আপনার লগ আউটপুট দেখতে পারেন।
লগিং এবং রিডেক্স স্টোরের জন্য নেটিভ ডিবাগারটি ব্যবহার করুন https://github.com/jhen0409/react-native-debugg
কেবল এটি ডাউনলোড করুন এবং সফ্টওয়্যার হিসাবে চালান তারপরে সিমুলেটর থেকে ডিবাগ মোড সক্ষম করুন।
এটি ক্রোম বিকাশকারী সরঞ্জামগুলির মতো অন্যান্য ডিবাগিং বৈশিষ্ট্যটিকে সমর্থন করে যা কোনও উপাদানকে সরবরাহ করা স্টাইলিং দেখতে সহায়তা করে।
রিডেক্স ডেভ সরঞ্জামগুলির জন্য শেষ সম্পূর্ণ সমর্থন
console.log("My log text")
আপনার কোডেঅ্যান্ড্রয়েডে:
আইওএসে:
আপনি আপনার ডিভাইস থেকে দূরবর্তী JS debugly বিকল্প ব্যবহার করতে পারেন অথবা আপনি কেবল ব্যবহার করতে পারেন প্রতিক্রিয়া-নেটিভ লগ-অ্যান্ড্রয়েড এবং প্রতিক্রিয়া-নেটিভ লগ-iOS 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);
উইন্ডোজ এবং অ্যান্ড্রয়েড স্টুডিও সহ ব্যবহারকারী:
আপনি এটিকে অ্যান্ড্রয়েড স্টুডিওতে লগক্যাট এর অধীনে খুঁজে পাবেন। এখানে প্রচুর লগিং বার্তাগুলি রয়েছে যা এখানে প্রদর্শিত হয়, তাই আপনার জন্য "রিএ্যাক্টনেটিভজেএস" এর জন্য একটি ফিল্টার তৈরি করা সহজ হতে পারে যা কেবলমাত্র আপনার কনসোল.লগ বার্তাগুলি প্রদর্শিত হবে যা আপনার প্রতিক্রিয়াীয় নেটিভ অ্যাপ্লিকেশনের ভিতরে তৈরি হয়েছে।
প্রতিটি বিকাশকারী এই দেশটির সাথে ডিবাগিংয়ের সমস্যার মুখোমুখি হন, এমনকি আমি এটির মুখোমুখিও হয়েছিলাম এবং আমি এটি উল্লেখ করেছি এবং প্রাথমিক স্তরে আমার জন্য সমাধানটি যথেষ্ট, এটি আমাদের কয়েকটি ক্ষেত্রে আরামদায়ক যা চেষ্টা করতে এবং ব্যবহার করতে আমাদের সহায়তা করে তার কয়েকটি উপায় রয়েছে cover
https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
আপনি রিঅ্যাকট্রনও ব্যবহার করতে পারেন, এটি আপনাকে কেবল লগিংয়ের চেয়ে অনেক বেশি কার্যকারিতা দেবে। https://github.com/infinitered/reactotron
এটি অর্জনের বেশ কয়েকটি উপায় রয়েছে, আমি সেগুলি তালিকাভুক্ত করছি এবং এগুলি ব্যবহারের ক্ষেত্রেও কনস অন্তর্ভুক্ত করছি। তুমি ব্যবহার করতে পার:
console.log
এবং ডিভাইস, অ্যান্ড্রয়েড স্টুডিও এবং এক্সকোড থেকে রিমোট ডিবাগিং বিকল্পটি বেছে না নিয়ে লগিং স্টেটমেন্টগুলি দেখুন। অথবা আপনি রিমোট ডিবাগিং বিকল্পটি বেছে নিতে পারেন এবং ক্রোম ডেভ সরঞ্জামগুলি বা ভিএসকোড বা অন্য কোনও সম্পাদক যা ডিবাগিং সমর্থন করে তাতে লগিং দেখতে পারেন, আপনাকে সতর্ক থাকতে হবে কারণ এটি পুরো প্রক্রিয়াটি ধীর করে দেবে।console.warn
তবে তারপরে আপনার মোবাইলের পর্দাটি সেই অদ্ভুত হলুদ বাক্সগুলিতে প্লাবিত হবে যা আপনার পরিস্থিতি অনুসারে সম্ভব এবং নাও সম্ভব।আপনি নিয়মিত ওয়েবের জন্য একই জিনিস ব্যবহার করেন। console
কমান্ড এছাড়াও এই ক্ষেত্রে কাজ করে। উদাহরণস্বরূপ, যদি আপনি ব্যবহার করতে পারেন console.log()
, console.warn()
,
console.clear()
ইত্যাদি
আপনি console
যখন আপনার প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশন চালাচ্ছেন তখন লগইন করার সময় আপনি কমান্ডটি ব্যবহার করতে Chrome বিকাশকারীকে ব্যবহার করতে পারেন ।
console.log()
আপনি যখন আপনার বিকাশকারী মেনু থেকে রিমোট জেএস ডিবাগার ব্যবহার করেন কনসোলে আপনার লগটি দেখার সেরা এবং সহজ উপায়
লগিং এবং ডিবাগিংয়ের জন্য ক্রোম ডেভটোল সেরা এবং সহজতম উপায়।
আপনি যদি ওসেক্সে থাকেন এবং একটি এমুলেটর ব্যবহার console.log
করে থাকেন তবে আপনি নিজের সাফারি ওয়েব ইন্সপেক্টরটিতে সরাসরি দেখতে পারেন ।
সাফারি => বিকাশ => সিমুলেটর - [এখানে আপনার সিমুলেটর সংস্করণ] => জেএস কনটেক্সট
সাধারণত দুটি পরিস্থিতি যেখানে আমাদের ডিবাগ করা দরকার।
যখন আমরা ডেটা সম্পর্কিত সমস্যাগুলির মুখোমুখি হই এবং আমরা সেই ক্ষেত্রে আমাদের ডেটা এবং ডিবাগ সম্পর্কিত ডেটা পরীক্ষা করতে চাই
console.log('data::',data)
এবং ডিবাগ জেএস দূরবর্তী অবস্থান সেরা বিকল্প।
অন্যান্য ক্ষেত্রে হ'ল ইউআই এবং শৈলীর সাথে সম্পর্কিত সমস্যাগুলি যেখানে আমাদের সেই উপাদানটির স্টাইলিং যাচাই করা দরকার সেখানে প্রতিক্রিয়া-দেব-সরঞ্জামই সেরা বিকল্প।
কনসোল.লগ যে কোনও জেএস প্রকল্পের জন্য ব্যবহার করা যেতে পারে। আপনি যদি লোকালহোস্টে অ্যাপটি চালাচ্ছেন তবে স্পষ্টতই এটি কোনও জাভাস্ক্রিপ্ট প্রকল্পের মতো। তবে সিমুলেটর বা যেকোন ডিভাইস ব্যবহার করার সময় সেই সিমুলেটরটিকে আমাদের লোকালহোস্টের সাথে সংযুক্ত করুন এবং আমরা কনসোলে দেখতে পাব।