অ্যাপটি অ্যাপ সিমুলেটারে চলমান অবস্থায় কেউ কীভাবে তাদের প্রতিক্রিয়া কোডটি রিঅ্যাক্ট নেটিভের সাথে ডিবাগ করতে পারে?
অ্যাপটি অ্যাপ সিমুলেটারে চলমান অবস্থায় কেউ কীভাবে তাদের প্রতিক্রিয়া কোডটি রিঅ্যাক্ট নেটিভের সাথে ডিবাগ করতে পারে?
উত্তর:
Cmd+Dসিমুলেটারের মধ্যে থেকে। এটি ক্রোমকে পপআপ করবে এবং সেখান থেকে আপনি বিকাশকারী সরঞ্জামগুলি ব্যবহার করতে পারেন।
সম্পাদনা:
এটি এখন সহায়তা ডক্সে লিঙ্কযুক্ত ।
Cmd+M
OS X এবং Android এর উপর
আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনটির জাভাস্ক্রিপ্ট কোডটি ডিবাগ করতে নিম্নলিখিতগুলি করুন:
Command + D
এবং একটি ওয়েবপৃষ্ঠা http: // লোকালহোস্ট: 8081 / ডিবাগার-ইউআই এ খুলতে হবে । (কেবলমাত্র ক্রোম) বা ব্যবহার করুনShake Gesture
Command + Option + I
Chrome বিকাশকারী সরঞ্জাম খুলতে টিপুন , বা View
-> Developer
-> এর মাধ্যমে এটি খুলুন Developer Tools
।গুগল ক্রোমের জন্য প্রতিক্রিয়া বিকাশকারী সরঞ্জাম এক্সটেনশানটি ইনস্টল করুন । React
বিকাশকারী সরঞ্জাম খোলা থাকলে আপনি যদি ট্যাবটি নির্বাচন করেন তবে এটি আপনাকে ভিউ হায়ারার্কি নেভিগেট করার অনুমতি দেবে ।
লাইভ পুনঃলোড সক্রিয় করতে নিম্নলিখিত করুন:
Control + Command + Z
।Enable/Disable Live Reload
, Reload
এবং Enable/Disable Debugging
বিকল্পগুলি দেখতে পাবেন ।একটি অ্যান্ড্রয়েড অ্যাপের জন্য, আপনি জিনমোশন ব্যবহার করছেন যদি আপনি মেনু টিপতে টগল করতে পারেন CMD + m
তবে এটি করে মেনুতে আপনাকে সক্ষম করতে হতে পারে।
CMD + m
ক্লিক করে এটি সক্ষম করুনdebug in chrome
সাথে প্রতিস্থাপন করা হয় start debug remotely
।
cmd + m
অথবা ctrl + m
, এবং নির্বাচন করুন start debug remotely
আপনার কাল্পনিক মধ্যে popup উইন্ডো থেকে
অন্যান্য উত্তর ছাড়াও। আপনি ডিবাগার স্টেটমেন্টটি ব্যবহার করে রিট্যাক্ট-নেটিব ডিবাগ করতে পারেন
উদাহরণ:
debugger; //breaks execution
এটির জন্য আপনার ক্রোম ডেভ সরঞ্জামগুলি অবশ্যই উন্মুক্ত থাকতে হবে
আপনি যদি উইন্ডোজে অ্যান্ড্রয়েড ডিভাইস ব্যবহার করে ডিবাগ করতে চান তবে কেবল একটি কমান্ড প্রম্পট খুলুন টাইপ করুন (আপনার অ্যাডাবটি সঠিকভাবে কাজ করছে তা নিশ্চিত করুন)
adb shell input keyevent 82
এটি চিত্রের মতো একটি পর্দা প্রম্পট করবে
তারপরে সিলেক্ট করুন
debug JS Remotely
এটি স্বয়ংক্রিয়ভাবে একটি নতুন উইন্ডো খুলবে then
এই প্রোগ্রামটি ব্যবহার করে দেখুন: https://github.com/jhen0409/react-native-debugger
উপর কাজ করে: windows
, osx
এবং linux
।
এটি সমর্থন করে: react native
এবংredux
আপনি ভার্চুয়াল উপাদান গাছটিও পরিদর্শন করতে পারেন এবং অ্যাপ্লিকেশনটিতে প্রতিবিম্বিত শৈলীগুলিকে সংশোধন করতে পারেন।
console.log(url)
, কিন্তু আউটপুট কোথায় তা খুঁজে পাচ্ছি না।
cmd ⌘+ + Dঅদ্ভুত আমার জন্য কাজ করে নি। টিপলে ctrl+ + cmd ⌘+ + ZiOS এর কাল্পনিক আমার জন্য ডিবাগ ব্রাউজার উইন্ডো বন্ধ পদাঘাত করেনি।
এটি পপ আপ পর্দা:
আপনার অ্যাপ্লিকেশনটি অ্যান্ড্রয়েড সিমুলেটারে চলার সময় ক্রোমিয়াম বা ফায়ারবগে http: // লোকালহোস্ট: 8081 / ডিবাগার-ইউআই নেভিগেট করে ডিবিয়ান 8 (জেসি) -তে 0.40.0-দেশীয় প্রতিক্রিয়া প্রদর্শন করা যেতে পারে । অ্যাপ্লিকেশন বিকাশকারী মেনু অ্যাক্সেস করতে, এখানে নির্দেশিত হিসাবে অন্য টার্মিনাল উইন্ডোতে নিম্নলিখিত কমান্ডটি চালান :
adb shell input keyevent 82
পূর্বের উত্তরগুলিতে মন্তব্য করার মতো যথেষ্ট খ্যাতি আমার নেই যা দুর্দান্ত। :) প্রতিক্রিয়া-নেটিভ অ্যাপ্লিকেশন বিকাশ করার সময় আমি কীভাবে ডিবাগ করছি তার কয়েকটি উপায় এখানে রইল।
লাইভ পুনরায় লোড হচ্ছে
প্রতিক্রিয়া-নেটিভ আপনার পরিবর্তনগুলি ⌘ + আর কীগুলির সাহায্যে দেখতে পারা সহজ করে তোলে বা সরাসরি লাইভ পুনরায় লোড সক্ষম করে এবং প্রহরী সর্বাধিক পরিবর্তনগুলি সহ সিমুলেটরটিকে "রিফ্রেশ" করবে। আপনি যদি কোনও ত্রুটি পান তবে আপনি সেই লাল পর্দা থেকে লাইন নম্বর থেকে একটি চিহ্ন পেতে পারেন। কিছু পূর্বাবস্থায় ফিরে আসার পরে আপনাকে আবার কর্মক্ষম অবস্থায় ফিরিয়ে আনতে হবে।
console.log('yeah, seriously.')
আমি নিজেকে debugger
ব্রেক পয়েন্ট যুক্ত করার চেয়ে প্রোগ্রামটি চালিয়ে দেওয়া এবং কিছু তথ্য লগইন করতে পছন্দ করি । (বাহ্যিক প্যাকেজগুলি / লাইব্রেরিগুলির সাথে কাজ করার চেষ্টা করার সময় শক্ত ডিবাগারটি কার্যকর এবং এটি স্বয়ংক্রিয়রূপে আসে, সুতরাং আপনি কী কী অন্যান্য পদ্ধতি ব্যবহার করতে পারবেন তা আপনি জানেন))
Enable Chrome Debugging
debugger;
আপনার প্রোগ্রাম বিরতি পয়েন্ট সহ ।
ঠিক আছে এটি আপনার ত্রুটিগুলির ধরণের এবং আপনার কীভাবে ডিবাগ করবেন তার পছন্দগুলির উপর নির্ভর করে। বেশিরভাগ ক্ষেত্রে undefined is not an object (evaluating 'something.something')
, পদ্ধতি 1 এবং 2 আমার পক্ষে যথেষ্ট ভাল হবে।
অন্য বিকাশকারীদের দ্বারা লিখিত বাহ্যিক গ্রন্থাগারগুলি বা প্যাকেজগুলির সাথে ডিল করার ক্ষেত্রে ডিবাগ করার জন্য আরও বেশি প্রচেষ্টা প্রয়োজন তাই একটি ভাল সরঞ্জামের মতো Chrome Debugging
কখনও কখনও এটি প্রতিক্রিয়া-নেটিভ প্ল্যাটফর্ম থেকে নিজেই আসে তাই রিঅ্যাক্ট-নেটিভ সমস্যাগুলির জন্য গুগল করা অবশ্যই সহায়তা করবে।
আশা করছি এটা ওখানে কাওকে সাহায্য করবে.
adb logcat *:S ReactNative:V ReactNativeJS:V
অ্যান্ড্রয়েড লগের জন্য এটি টার্মিনালে চালান।
আপনি যদি মাইক্রোসফ্ট ভিজ্যুয়াল কোড ব্যবহার করে থাকেন তবে নেটিভ টুলস এক্সটেনশন প্রতিক্রিয়াটি ইনস্টল করুন। তারপরে আপনি পছন্দসই লাইন নম্বরটিতে ক্লিক করে ব্রেক পয়েন্ট যুক্ত করতে পারেন। অ্যাপটি সেটআপ এবং ডিবাগ করার জন্য এই পদক্ষেপগুলি অনুসরণ করুন:
আপনি যদি এটি ব্যবহার করেন তবে এমবুটরটিতে দূরবর্তী জেএসকে দূর থেকে সক্ষম করতে ভুলে যাবেন না।
অ্যান্ড্রয়েডের জন্য: মেনু প্রকাশের জন্য Ctrl + M (এমুলেটর) বা ফোনটি (ডিভাইসে) কাঁপুন।
আইওএসের জন্য: মেনু প্রকাশের জন্য সিএমডি + ডি বা ফোনটি কাঁপুন
আপনার ক্রোম রয়েছে তা নিশ্চিত করুন।
প্রকাশিত মেনুতে ডিবাগ জেএস রিমোটলি অপশন নির্বাচন করুন।
ক্রোম লোকালহোস্টে স্বয়ংক্রিয়ভাবে খোলা হবে: 8081 / ডিবাগার-ইউআই। আপনি নিজে এই লিঙ্কটি দিয়ে ডিবাগারেও যেতে পারেন।
সেখানে কনসোল প্রকাশিত হয় এবং আপনি দেখতে পাবেন লগগুলি নোট করা হচ্ছে।
আমার কাছে বিক্রিয়া -নেটিভ ডিবাগ করার সর্বোত্তম উপায় হ'ল "রিঅ্যাক্ট্রন" ব্যবহার করে ।
রিঅ্যাকট্রন ইনস্টল করুন তারপরে এগুলি আপনার প্যাকেজ.জসনে যুক্ত করুন:
"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2",
এখন, এটি আপনার কোডটিতে লগইন করার বিষয়টি। উদাহরণ:console.tron.log('debug')
উপরের মেনুতে উত্সগুলিতে যান এবং ডান হাতের ফাইল এক্সপ্লোরারটিতে আপনার জেএস ক্লাস ফাইলটি সন্ধান করুন
আপনি ছবিতে দেখতে দেখতে ব্রেকপয়েন্টগুলি রাখতে পারেন এবং কোডটি সেখানে ডিবাগ করতে পারেন।
Android এর জন্য অ্যাপ্লিকেশন .Press জন্য Ctrl + এম ডিবাগ JS নির্বাচন দূরবর্তী অবস্থান থেকে এটা দিয়ে URL Chrome এ একটি নতুন উইন্ডো খুলবে HTTP: // স্থানীয় হোস্ট: 8081 / ডিবাগার-ui এ । আপনি এখন ক্রোম ব্রাউজারে অ্যাপটি ডিবাগ করতে পারেন
আপনি যদি ডিফল্ট হিসাবে ডিবাগিং সক্ষম করতে চান:
import { NativeModules } from 'react-native';
if (__DEV__) {
NativeModules.DevSettings.setIsDebuggingRemotely(true)
}
এন্ড্রয়েড এ কাজ করতে:
npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android
তথ্যসূত্র: ডিফল্ট হিসাবে সক্ষম "ডিবাগ জেএস রিমোটলি" সহ একটি প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশন চালু করুন
ধরে নিচ্ছি আপনি অ্যান্ড্রয়েড এমুলেটরটিতে এই মেনুটি প্রদর্শন করতে চান
তারপরে, ⌘+m
কোনও ম্যাকের অ্যান্ড্রয়েড এমুলেটারে এই ডেভ সেটিংস ডায়ালগটি পপআপ করার চেষ্টা করুন ।
যদি এটি না দেখায় তবে যান AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box
।
এবং তারপরে আবার চেষ্টা করুন ⌘+m
।
যদি এটি এখনও না দেখায় তবে চলমান এমুলেটর সেটিংসে এবং Send keyboard shortcuts to
কম্বোবক্স / ড্রপডাউনটিতে যান তবে Emulator controls (default)
বিকল্পটি নির্বাচন করুন ।
এবং তারপরে আবার চেষ্টা করুন ⌘+m
।
আমি আশা করি এটি সাহায্য করে, এটি আমার পক্ষে কাজ করেছিল।
আপনি যদি রেডাক্স ব্যবহার করেন তবে আমি নেটিভ ডিবাগারকে প্রতিক্রিয়া জানাতে সুপারিশ করি। এটিতে ক্রোম ডেভোলগুলি অন্তর্ভুক্ত রয়েছে তবে এতে রেডাক্স ডেভলগুলি এবং প্রতিক্রিয়া দেবতুলও রয়েছে।
রেডাক্স ডিভলটুলস : এটি আপনাকে আপনার ক্রিয়াকলাপগুলি দেখতে এবং সেগুলির মধ্য দিয়ে পিছনে এগিয়ে যেতে সহায়তা করে। এটি আপনাকে আপনার রডেক্স স্টোরটি দেখতে দেয় এবং প্রতিটি ক্রিয়াকলাপের জন্য আপডেট হওয়া রাষ্ট্রের সাথে পূর্ববর্তী অবস্থানে স্বয়ংক্রিয়ভাবে পৃথক হওয়ার বৈশিষ্ট্য রয়েছে, যাতে আপনি দেখতে পাচ্ছেন যে ক্রমগুলির ক্রমবর্ধমান পদক্ষেপের মধ্য দিয়ে আপনি পিছনে পিছনে পদক্ষেপ নিচ্ছেন।
দেবতুলের প্রতিক্রিয়া : এটি আপনাকে কোনও নির্দিষ্ট উপাদান, যেমন এর সমস্ত প্রপস তেমনি এটির উপাদান হিসাবেও পরিদর্শন করতে দেয়। যদি আপনার কাছে উপাদানটির একটি অংশ রয়েছে যা বুলিয়ান, এটি আপনাকে এটি টগল করতে ক্লিক করতে দেয় এবং দেখুন যে আপনার অ্যাপ্লিকেশনটি পরিবর্তিত হলে কীভাবে প্রতিক্রিয়া দেখায়। দুর্দান্ত বৈশিষ্ট্য।
ক্রোম ডেভল্টুলস আপনাকে আপনার সমস্ত কনসোল আউটপুটগুলি দেখতে, ব্রেকপয়েন্টগুলি ব্যবহার করতে, ডিবাগারে বিরতি দেওয়ার অনুমতি দেয়; ইত্যাদি স্ট্যান্ডার্ড ডিবাগিং বৈশিষ্ট্য। আপনি যদি রেডাক্স ডিভলটুলগুলিতে আপনার ক্রিয়াগুলি তালিকাভুক্ত থাকে এমন জায়গায় যদি আপনি সঠিকভাবে ক্লিক করেন এবং 'নেটওয়ার্ক পরিদর্শনকে মঞ্জুরি দিন' বাছাই করেন, তবে আপনি ক্রোম ডেভটোলসের নেটওয়ার্ক ট্যাবে আপনার API কলগুলি পরিদর্শন করতে পারেন যা মিষ্টি।
উপসংহারে এই সমস্ত এক জায়গায় থাকা দুর্দান্ত! আপনার যদি তাদের কোনওটির প্রয়োজন না হয় তবে আপনি এটি অন / অফ টগল করতে পারেন। নেটিভ ডিবাগারটি প্রতিক্রিয়া পান এবং জীবন উপভোগ করুন।
প্রতিক্রিয়া নেটিভ ডিবাগার অ্যাপ্লিকেশনটি ব্যবহার করার বিকল্প উপায় এটি।
আপনি নীচের লিঙ্কটি ব্যবহার করে অ্যাপ্লিকেশনটি ডাউনলোড করতে পারেন এটি উত্স কোডের সাথে রিডুএক্স স্টোর পরিচালনার জন্য খুব ভাল অ্যাপ্লিকেশন।
পাশাপাশি এখন আপনার নিজের সহায়তার জন্য নীচের লিঙ্কটি সরাসরি ব্যবহার করতে পারেন।
আপনি যদি এমুলেটর ব্যবহার করেন তবে Ctrl+ M& সিমুলেটর Cmd+ ব্যবহার করুনD
দূরবর্তী অবস্থান থেকে - ডিবাগ js এ ক্লিক করুন
গুগল ক্রোম কনসোলে যান
একটি খুব ভাল ডিবাগার নাম রিঅ্যাকট্রনও রয়েছে। https://github.com/infinitered/reactotron
কিছু ডেটা মান দেখতে আপনাকে ডিবাগ মোডে থাকতে হবে না এবং প্রচুর বিকল্প রয়েছে।
সত্যিই দরকারী যে একবার দেখুন। ;)
প্রতিক্রিয়া-নেটিভ ডিবাগিং মধ্যে অনেক সহজ।
সেমিডি + ডি
ctrl + cmd + z (সিমুলেটারের জন্য)
স্পর্শ সহ ডিভাইস কাঁপুন (আপনার বিকাশকারী বিকল্প সক্ষম হয়েছে তা নিশ্চিত করুন)
পদক্ষেপ 1:debugger
আপনি যেখানে স্ক্রিপ্টটি থামাতে চান সেখানে
স্থান দিন :
async saveItem(item, selectedValue) {
debugger
try {
await AsyncStorage.setItem(item, selectedValue);
}
catch (error) {
console.error('AsyncStorage error: ' + error.message);
}
}
কোডের এই ব্লকে কখনও নিয়ন্ত্রণ এলে এটি ডিবাগারকে বিরতি দেয়।
পদক্ষেপ 2:
প্রেস Cmd+D
উপর iOS এমুলেটর এবং Cmd+M
উপর অ্যান্ড্রয়েড কাল্পনিক । আপনার যদি আসল ডিভাইস থাকে তবে ডেভ মেনু খুলতে ডিভাইসটি কাঁপুন, আপনি যদি ডিভাইসটি নাড়াতে না চান তবে এই ব্লগটি অনুসরণ করুন
পদক্ষেপ 3:
নির্বাচন করুন Enable Remote JS Debugging
, এটি ক্রোম খুলবে
পদক্ষেপ 4:
নির্বাচন করুনDeveloper Tools.
পদক্ষেপ 5:Sources
আপনি debugger
নিজের কোডের মধ্যে যেখানেই লিখেছেন সেখানে
আপনার ডিবাগারটি ট্যাবে বিরাম দেওয়া হয়েছে । কনসোলে যান এবং আপনি যে কোনও প্যারামিটারগুলি ডিবাগ করতে চান তা টাইপ করুন (যা কোড ব্লকে উপস্থিত রয়েছে) যেমন:
পরবর্তী ডিবাগার পয়েন্টে যেতে আবার সূত্রগুলিতে যান -> স্ক্রিপ্ট এক্সিকিউশন পুনরায় চালু করুন বোতামটিতে ক্লিক করুন (ডান কোণার নীল বোতাম)
আপনি যেখানেই স্ক্রিপ্টটি থামাতে চান সেখানে ডিবাগারটি রাখুন।
ডিবাগ উপভোগ করুন !!
আপনি "ডিবাগ জেএস রিমোটলি" সক্ষম না করেই আপনার অ্যাপের আইওএস সংস্করণটি ডিবাগ করতে সাফারি ব্যবহার করতে পারেন, কেবল নীচের পদক্ষেপগুলি অনুসরণ করুন:
1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger
প্রথমে আপনার আইওএস সিমুলেটারে, আপনি যদি [কমান্ড + ডি] কী টিপেন তবে আপনি এই স্ক্রিনটি দেখতে পাবেন।
তারপরে ডিবাগ জেএস দূরবর্তী বোতামে ক্লিক করুন।
আপনি এর পরে রিয়েট নেটিভ ডিবাগার পৃষ্ঠাটি দেখতে পাবেন।
এবং তারপরে আপনার পরিদর্শককে [f12] খুলুন, এবং এটি ডিবাগ কনসোলটিতে যান! :)
এটি আসলে বেশ সহজ। শুধু সেন্টিমিডি ডি চাপুন (ম্যাক থাকলে) এবং সিমুলেটর একটি পপ আপ মেনু তৈরি করবে। সেখান থেকে কেবল "ডিবাগ জেএস রিমোটলি" বা তার লাইনের পাশাপাশি কিছু ক্লিক করুন। সাবধান থাকুন যে নির্দিষ্ট প্যাকেজ সম্পর্কিত কোড সম্পাদন করার সময় ডিবাগারটি চালানো লোকজনকে সমস্যা বলে পরিচিত। প্রতিক্রিয়া-স্থানীয়-মানচিত্র এবং ডিবাগার নিয়ে আমার সমস্যা ছিল। তবে তা স্থির ছিল। বেশিরভাগ অংশের জন্য আপনার ভাল হওয়া উচিত।