آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Debugging در یک React Native Application

دوره های مرتبط با این مقاله

آموزش Debugging در یک React Native Application

فعال کردن Keyboard Shortcut ها

React Native از چند Keyboard Shortcut در شبیه ساز iOS پشتیبانی می کند. آن ها در زیر شرح داده شده اند. برای فعال کردن شان، منوی Hardware را باز کنید، Keyboard را انتخاب کنید و مطمئن شوید که "Connect Hardware Keyboard" انتخاب شده.

دسترسی به Developer Menu در برنامه

می توانید با تکان دادن دستگاه iOS خود، و یا انتخاب "Shake Gesture" در منوی Hardware در شبیه ساز iOS، به Developer Menu دسترسی پیدا کنید.

همچنین می توانید از کلید ⌘D حین اجرای application در شبیه ساز iOS ، یا از ⌘M حین اجرای application در شبیه ساز android در Mac و Ctrl + M در Windows و Linux، به این منظور استفاده کنید. برای android، می توانید دستور adb shell input keyevent 82 را برای باز کردن منوی dev اجرا کنید (82 کد کلید منو است(.


Developer Menu

Developer Menu در buildهای release (production)غیرفعال است.

reload کردن جاوا اسکریپت

به جای کامپایل دوباره application پس از هر تغییر، می توانید کد جاوا اسکریپت برنامه خود را reload کنید. برای انجام این کار، از Developer Menu، گزینه ی "Reload" را انتخاب کنید. همچنین می توانید از میانبر ⌘R در شبیه ساز iOS ، یا دوبار فشردن کلید R در شبیه ساز android استفاده کنید.

reload اتوماتیک

می توانید سرعت توسعه خود را با تنظیم application برای reload خودکار پس از تغییر، بالا ببرید. کد. Reloadاتوماتیک با انتخاب "Enable Live Reload" از منوی Developer Menu امکان پذیر است.

می توانید با فعال کردن کردن Hot Reloading از منوی Developer برنامه را حین افزودن version جدید فایل های جاوااسکریپتی تان اجرا کنید.

مواردی وجود دارد که Hot Reloading به طور صحیح انجام نمی شود. اگر به هر مشکلی برخوردید، برای reset برنامه خود یک بار full reload انجام دهید.

در شرایط خاص باید برنامه را برای اعمال تغییرات rebuild کنید:


  • در صورت افزودن Resource جدید به native application خود ، مانند افزودن یک تصویر در Images.xcassets در iOS یا پوشه res / drawable در Android.
  • درصورت تغییر کد native (Objective-C / Swift در iOS یا Java / C++ در Android).

error و warningهای درون برنامه ای

در زمان development build، errorها و warningها در داخل برنامه نمایش داده می شوند.

error

error های درون برنامه ای به شکل متنی با background قرمز روی صفحه نمایش در برنامه نمایش داده می شود. این صفحه به عنوان RedBox شناخته می شود. شما می توانید از console.error() برای ایجاد یکی به صورت دستی استفاده کنید.

warning

warningها روی صفحه نمایش با background زرد نمایش داده می شود. این warningها به عنوان YellowBox شناخته می شود. برای روی مشاهده جزئیات یا رد کردن warning روی آن ها کلیک کنید. توانید از console. warn () برای ایجاد یکی به صورت دستی استفاده کنید.

برای نمایش warningها در زمان توسعه از console.disableYellowBox = true استفاده کنید. میتوان بعضی warningها را تنظیم کرد که نادیده گرفته شوند، با مقداردهی به آرایه ای از پیشوندهایی که باید نادیده گرفته شوند:


import { YellowBox }  from 'react-native';YellowBox.ignoreWarnings( [ 'Warning: ...' ] );

در CI/Xcode هشدارها را می توان با مقداردهی کردن به متغیر محیطی IS_TESTING، غیرفعال کرد.

Warning ها و error ها در release (production) build ها به طور خودکار غیرفعال هستند.

Chrome Developer Tools

برای debug جاوااسکریپت در chrome، گزینه ی "Debug JS Remotely" را از Developer Menu انتخاب کنید. tab جدیدی در http://localhost:8081/debugger-ui باز می شود.

از منوی chrome، Tools → Developer Tools را انتخاب کنید. با کلیدهای میانبر (⌘⌥I در macOS، Ctrl Shift I در Windows) نیز میتوانید DevTools را بیاورید. می توانید برای debug بهتر Pause On Caught Exceptions را هم فعال کنید.

توجه داشته باشید: افزونه ای در chrome به اسم React Developer Tools Chrome با React Native کار نمی کند، اما می توانید از نسخه مستقل آن استفاده کنید

debug با استفاده از debugger جاوا اسکریپت سفارشی

برای استفاده از debugger جاوااسکریپت به جای Chrome Developer Tools، متغیر محیطی REACT_DEBUGGER را به یک فرمان که debuggerتان را باز کند، set کنید. سپس می توانید "Debug JS Remotely" را از Developer Menu برای شروع debug انتخاب کنید.

debugger لیستی از تمام root های پروژه را که با یک space جدا شده است پیدا می کند. برای مثال، اگر REACT_DEBUGGER = "node /path/to/launchDebugger.js --port 2345 --type ReactNative" را تنظیم کنید، سپس دستور node /path/to/launchDebugger.js --port 2345 - type ReactNative / path / to / reactNative / app برای راه اندازی debugger تان استفاده می شود.

دستورات debugger سفارشی که به این شیوه اجرا می شوند، باید process های کوتاه مدت باشد و نباید بیش از 200 کیلوبایت خروجی داشته باشند.

Safari Developer Tools

شما می توانید از Safari برای debug نسخه iOS برنامه خود بدون نیاز به فعال کردن "Debug JS Remotely" استفاده کنید.

Developer Menu را در Safari فعال کنید: به مسیر Preferences → Advanced → بروید سپس " Show Develop menu in menu bar " را انتخاب کنید.

JSContext برنامه خود را انتخاب کنید: Develop → Simulator → JSContext

Web Inspector Safari باید باز شود که دارای یک console و یک debugger است.

با این حال، مشکلاتی وجود دارد:

1. هنگام debug، sourcemaps وجود ندارد.

2. هر زمانی که برنامه reload می شود (از طریق live reload ، یا به صورت دستی)، JSCONtext جدید ساخته می شود. انتخاب "Automatically Show Web Inspectors for JSContexts" کارتان را راحت می کند.

React Developer Tools

می توانید از نسخه مستقل React Developer Tools برای دیباگ React component hierarchy استفاده کنید. برای استفاده از آن، بسته react-devtools را در به صورت global نصب کنید:


npm install -g react-devtools

حال برای راه اندازی DevTools ، دستور react-devtools را از ترمینال اجرا کنید:


react-devtools


React Developer Tools

باید در عرض چند ثانیه شما را به شبیه ساز وصل کند.

نکته: اگر نمی خواهید react-devtools را به صورت global نصب کنید، می توانید آن را به عنوان dependency به پروژه اضافه کنید. package react-devtools را با استفاده از دستور npm install -save-dev re-devtools به پروژه خود اضافه کنید، سپس "react-devtools": "react-devtools" را به بخش scripts در فایل package.json اضافه کنید، و سپس دستور npm run react-devtools را از پوشه پروژه خود برای باز کردن DevTools اجرا کنید.

کار با React Native Inspector

منوی Developer را از درون برنامه باز کنید و گزینه ی "Toggle Inspector" را انتخاب کنید. حال می توانید با انتخاب هر المانی در صفحه، اطلاعاتی درمورد آن ببینید:


React Native Inspector

با این حال، هنگامی که react-devtools در حال اجرا است، Inspector به حالتی خاص می رود و از DevTools به عنوان UI اصلی استفاده می کند. در این حالت، کلیک روی چیزی در شبیه ساز ، component مربوطه را در DevTools را نمایش می دهد:


React Native Inspector

برای خارج شدن از این حالت، از "Toggle Inspector" در همان منو استفاده کنید.

مانیتور کردن Component Instance ها

هنگام debug جاوا اسکریپت در Chrome، می توانید prop ها و state های React component ها را در console مرورگر بررسی کنید.

اول، با دنبال کردن دستورالعمل ها Chrome console را باز کنید.

اطمینان حاصل کنید که از منوی گوشه بالا سمت چپ در Chrome console گزینه ی debuggerWorker.js انتخاب شده. این مرحله ضروری است.

سپس یک component در React DevTools انتخاب کنید. می توانید از بخش جستجو در بالای صفحه برای جست و جوی آن ها بر اساس نامشان استفاده کنید. به محض انتخاب، به شکل $r در console Chrome در دسترس خواهد بود، و prop ها و state های آن را مانیتور کنید.


React Native Inspector

بررسی performance برنامه

با انتخاب "Perf Monitor" در Developer Menu می توانید مشکلات performance را debug کنید.

debug برنامه های Eject شده

ادامه ی از این راهنما فقط مربوط به پروژه های ساخته شده با react-native init یا expo init یا Create React Native App است که اصطلاحا eject شده اند.

دسترسی به console log

می توانید console log های application iOS یا Android را با استفاده از دستورات زیر در ترمینال حین اجرای آن، ببینید:


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

شما همچنین می توانید از طریق Debug → Open System Log... در شبیه ساز iOS و یا با اجرای adb logcat *:S ReactNative:V ReactNativeJS:V در ترمینال در حالی که یک برنامه Android روی device یا شبیه ساز اجرا می شود، به این log ها دسترسی پیدا کنید.

اگر از Create React Native App یا Expo CLI استفاده می کنید، console log های application در همان ترمینال Packager ظاهر می شود.

debug روی device با Chrome Developer Tools

اگر از Create React Native App یا Expo CLI استفاده می کنید، این از قبل تنظیم شده است.

در دستگاههای iOS، فایل RCTWebSocketExecutor.m را باز کنید و localhost را به آدرس IP کامپیوترتان تغییر دهید، سپس از Developer Menu ، «Debug JS Remotely» را انتخاب کنید.

در دستگاههای Android 5.0+ که از طریق USB متصل شده اند، می توانید از ابزار command line adb برای تنظیم port forwarding از دستگاه به کامپیوتر خود استفاده کنید.


adb reverse tcp:8081 tcp:8081

همچنین گزینه "Dev Settings" را از Developer Menu انتخاب کنید، سپس تنطیمات "Debug server host for device" را تصحیح کنید تا با آدرس IP کامپیوتر مطابقت کند.

اگر به مشکلی برخوردید، ممکن است یکی از افزونه های Chrome شما با debugger تداخلی داشته بشد. سعی کنید تمام افزونه های خود را غیرفعال کنید و سپس یکی یکی آنها را مجددا فعال کنید تا زمانی که افزونه مشکل ساز را پیدا کنید.

debug کد native

هنگام کار با کد native، مثلا هنگام نوشتن ماژول های native، می توانید برنامه را از Android Studio یا Xcode اجرا کنید و از debugger آن ها (breakpoint و غیره) استفاده کنید.

  • 694
  •    0
  • تاریخ ارسال :   1398/06/03

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .