Debugging در React Native

یکی از اصلی ترین بحث هایی که توسعه دهنده ها باهاش برخورد میکنند و سروکله میزنند،Debugging هست.همیشه ما یک سری برنامه مینویسیم و در یک بخش هایی دور از انتظار ما کار میکنه.در همین لحظات Debugging نقش پررنگی پیدا میکنه.در این مقاله من قصد دارم روش هایی برای debugging پروژه های React Native معرفی کنم.

فعال کردن Keyboard Shortcuts

React Native از چند keyboard shortcuts در شبیه ساز IOS پشتیبانی میکنه که در پایین بصورت کامل این موارد رو توضیح میدم.برای فعال کردن keyboard shortcuts ، مطمئن بشید که تیک “Connect Hardware Keyboard” علامت زده باشه.

Accessing the In-App Developer Menu

شما میتونید به developer menu از طریق shaking گوشی یا “Shake Gesture” درون Hardware menu در شبیه ساز IOS دسترسی داشته باشید.شما همچنین میتونید از ⌘D زمانی که اپلیکیشن بر روی شبیه ساز IOS یا ⌘M زمانی که بر روی شبیه ساز Android در حال اجراست،استفاده کنید.همچنین برای android شما میتونید دستور adb shell input keyevent 82 برای بازکردن dev menu استفاده کنید.

توجه کنید که Developer Menu در حالت production غیر فعاله.

Reloading JavaScript

بجای اینکه شما هر دفعه پس از تغییرات اپلیکیشن رو recompiling کنید،میتونید کدهای جاوااسکریپت اپلیکیشن رو reload کنید.برای انجام اینکار “Reload” رو از Developer Menu انتخاب کنید یا ⌘R رو در شبیه ساز IOS و با دوبار انتخاب R در شبیه ساز Android عملیات Reload رو انجام بدید.

Automatic reloading

برای افزایش سرعت توسعه برنامه و جلوگیری از reload های متعدد “Enable Live Reload” رو از Developer Menu انتخاب کنید تا کدهای جاوا اسکریپت بصورت اتوماتیک Reloade بشن.

همچنین شما میتونید برنامه رو در حال اجرا نگه دارید و با انتخاب قابلیت Hot Reloading از Developer Menu بدون Reloade تغییراتی که ایجاد کرذید رو مشاهده کنید.

شما باید برنامه خودتون رو برای تغییرات خاصی که انجام میدید rebuild کنید:

یک سری resource جدید در native app اضافه کنید مثلا image در Images.xcassets در IOS یا پوشه res/drawable در Android.
تغییرات در کدهای نیتیو (Objective-C/Swift on iOS or Java/C++ on Android)

In-app Errors and Warnings

Errors و warnings درون اپلیکیشن در development builds نمایش داده میشه.

Errors

In-app errors بصورت تمام صفحه با یک رنگ پس زمینه قرمز نمایش داده میشه.این صفحه به RedBox نیز شناخته میشه.شما همچنین میتونید از ()console.error بصورت دستی استفاده کنید.

Warnings

Warnings بر روی صفحه با رنگ پس زمینه زرد نمایش داده میشه.این نوع پیغام ها با YellowBoxes نیز شناخته میشن.اگر بر روی این پیغام کلیک کنید اطلاعات بیشتری در اختیارتون میزاره یا میتونید پیغام رو dismiss کنید.دقیقا شبیه RedBox شما میتونید ()console.warn نیز بصورت دستی استفاده کنید.

YellowBoxes نیز میتونه در حین توسعه با استفاده از console.disableYellowBox = true; نمایش داده نشه.بعضی از warnings رو میتونید با استفاده از تنظیم یک آرایه نادیده بگیرید.

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

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

توجه کنید که RedBoxes و YellowBoxes بصورت خودکار در حالت production غیر فعال میشه.

Chrome Developer Tools

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

در کروم Tools → Developer Tools رو از منو انتخاب کنید تا Developer Tools باز بشه.شما همچنین میتونید با استفاده از کیبورد(⌘⌥I on macOS, Ctrl Shift I on Windows) به این ابزار دسترسی داشته باشید.

React Developer Tools

شما میتونید از the standalone version of React Developer Tools برای debug کامپوننت های React استفاده کنید.برای استفاده از این ابزار،پکیج react-devtools رو نصب کنید.

npm install -g react-devtools

1	npm install -g react-devtools

حالا دستور react-devtools از ترمینال برای launch ابزار standalone DevTools رو اجرا کنید.

react-devtools

1	react-devtools

این ابزار بعد از چند ثانیه با simulator ارتباط برقرار میکنه.

Integration with React Native Inspector

گزینه Show Inspector رو در developer menu انتخاب کنید.با انتخاب این گزینه،شما میتونید با کلیک بر روی هر UI element اطلاعاتی درباره ی عنصر کلیک شده رو ببینید.

جشنواره تخفیف یلدا 1400

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

Performance Monitor

شما همچنین میتونید با انتخاب گزینه “Perf Monitor” در Developer Menu عملکرد برنامه رو ببینید.

Accessing console logs

شما میتونید console logs برای Android و Ios در ترمینال مشاهده کنید.برای اینکار کافیه به دایرکتوری پروژه برید و دستورهای زیر رو در ترمینال اجرا کنید.

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

1 2	$ react-native log-ios $ react-native log-android

Debugging on a device with Chrome Developer Tools

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

در گوشی های Android با نسخه 5.0 به بالا که با USB متصل شده اند،شما میتونید از adb command line tool برای setup پورت از گوشی به سیستمتان استفاده کنید.

adb reverse tcp:8081 tcp:8081

1	adb reverse tcp:8081 tcp:8081

“Dev Settings” رو از Developer Menu انتخاب کنید و “Debug server host for device” رو با IP سیستمتان بروز رسانی کنید.

Debugging with Stetho on Android

دستور العمل های زیر را برای فعال کردن Stetho در Android دنبال کنید.

1.در android/app/build.gradle خط کدهای زیر رو در بخش dependencies اضافه کنید.

debugCompile 'com.facebook.stetho:stetho:1.5.0'
 debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.0'

1 2	debugCompile 'com.facebook.stetho:stetho:1.5.0' debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.0'

2.یک کلاس جدید جاوا به نام StethoWrapper ایجاد کنید.

// android/app/src/release/java/com/{yourAppName}/StethoWrapper.java

public class StethoWrapper {

    public static void initialize(Context context) {
        // NO_OP
    }

    public static void addInterceptor() {
        // NO_OP
    }
}

// android/app/src/release/java/com/{yourAppName}/StethoWrapper.java

public class StethoWrapper {

public static void initialize(Context context) {

// NO_OP

}

public static void addInterceptor() {

// NO_OP

}

// android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java

public class StethoWrapper {
    public static void initialize(Context context) {
      Stetho.initializeWithDefaults(context);
    }

    public static void addInterceptor() {
      OkHttpClient client = OkHttpClientProvider.getOkHttpClient()
             .newBuilder()
             .addNetworkInterceptor(new StethoInterceptor())
             .build();

      OkHttpClientProvider.replaceOkHttpClient(client);
    }
}

// android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java

public class StethoWrapper {

public static void initialize(Context context) {

Stetho.initializeWithDefaults(context);

}

public static void addInterceptor() {

OkHttpClient client = OkHttpClientProvider.getOkHttpClient()

.newBuilder()

.addNetworkInterceptor(new StethoInterceptor())

.build();

OkHttpClientProvider.replaceOkHttpClient(client);

}

3.فایل android/app/src/main/java/com/{yourAppName}/MainApplication.java رو باز کنید و تابع onCreate رو به شکل زیر جایگزین کنید

public void onCreate() {
      super.onCreate();

      if (BuildConfig.DEBUG) {
          StethoWrapper.initialize(this);
          StethoWrapper.addInterceptor();
      }

      SoLoader.init(this, /* native exopackage */ false);
    }

public void onCreate() {

super.onCreate();

if (BuildConfig.DEBUG) {

StethoWrapper.initialize(this);

StethoWrapper.addInterceptor();

}

SoLoader.init(this, /* native exopackage */ false);

}

4.پروژه خودتون رو در Android Studio باز کنید و issues های مربوط به dependency رو رفع کنید.IDE شما رو راهنمایی میکنه زمانیکه بر روی هر red lines کلیک میکنید.

5.دستور react-native run-android رو اجرا کنید.

6.در یک Tab جدید در مرورگر chrome://inspect رو بازکنید،سپس بر روی ‘Inspect device’ کلیک کنید و سپس به “Powered by Stetho” برید.

Debugging native code

زمانی که شما با کدهای native کار میکنید،مثلا زمانی که یک native modules مینویسید،شما میتونید اپلیکیشن رو از Android Studio یا Xcode لانچ کنید و نتایج رو از ویژگی های native debugging بگیرید.

امیدوارم که این مقاله در جهت debug پروژه های React Native بهتون کمک کرده باشه و با استفاده از این مطالب بتونید خیلی راحت تر کدهاتون رو چک و بررسی کنید.اگه تجربه ای در زمینه استفاده از این ابزارها دارید.خوشحال میشم که در کامنت ها به اشتراک بزارینش تا همگی استفاده کنیم.

Debugging در React Native

فعال کردن Keyboard Shortcuts

Accessing the In-App Developer Menu

Reloading JavaScript

Automatic reloading

In-app Errors and Warnings

Errors

Warnings

Chrome Developer Tools

React Developer Tools

Integration with React Native Inspector

Performance Monitor

Accessing console logs

Debugging on a device with Chrome Developer Tools

Debugging with Stetho on Android

Debugging native code

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

فعال کردن Keyboard Shortcuts

Accessing the In-App Developer Menu

Reloading JavaScript

Automatic reloading

In-app Errors and Warnings

Errors

Warnings

Chrome Developer Tools

React Developer Tools

Integration with React Native Inspector

Performance Monitor

Accessing console logs

Debugging on a device with Chrome Developer Tools

Debugging with Stetho on Android

Debugging native code

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نمایش عکس های گوشی در react native (ری اکت نیتیو)

دیدگاهتان را بنویسید لغو پاسخ