שילוב Flipper עבור React Native וניפוי באגים באנדרואיד

כיצד Flipper פותר נקודות כאב בניפוי באגים

לעתים קרובות אנו נתקלים במצבים שבהם כלי ניפוי מובנים לא נותנים את התמונה המלאה. Chrome DevTools מציג רק את הצד של JS, בעוד שממשק המשתמש המקורי, מסדי הנתונים והלוגים נשארים מוסתרים. הפתרון הוא Flipper, כלי שולחני מבית Meta המשלב Network Inspector, Layout Inspector, מציג SharedPreferences, Crash Reporter ועוד בחלון אחד. Flipper (Meta). אנו משלבים אותו בפרויקטים של React Native ו-Android תוך יום אחד, ומבטיחים פעולה יציבה במבני debug. עם 5 שנות ניסיון בשילוב Flipper בעשרות פרויקטים—מסטארטאפים ועד פתרונות ארגוניים—ראינו שעלויות הניפוי ירדו בעד 40%, והכלי לעתים קרובות מחזיר את ההשקעה בתוך השבוע הראשון לשימוש.

Flipper מספק מה שכלים סטנדרטיים חסרים: בודק פריסה מקורי עם מידות ושוליים אמיתיים, צפייה ב-AsyncStorage, רישום מלא של בקשות HTTP עם גופים וכותרות, ודוחות קריסה. במאמר זה, נעבור על שילוב Flipper בפרויקטים של React Native ו-Android, נסקור תוספים חיוניים, ונראה כיצד להימנע ממלכודות תאימות נפוצות. המהנדסים שלנו בדקו את כל הגרסאות הפופולריות של Flipper ויודעים כיצד לעקוף באגים ידועים. אם אתה נתקל בשגיאות בנייה או בבעיות תצורת תוספים—אנחנו יכולים לעזור. פנה אלינו כדי להתחיל ולהפחית את זמן הניפוי.

חיבור Flipper ל-React Native

החל מ-React Native 0.62, Flipper כלול בתבנית הפרויקט. אם יצרת את הפרויקט שלך עם npx react-native init, Flipper כבר קיים—פשוט הפעל את אפליקציית השולחן העבודה של Flipper ב-Mac/Windows והרץ את האפליקציה שלך במצב debug. חיבור הלקוח-שרת נוצר אוטומטית דרך הרשת המקומית.

עבור פרויקטים ישנים או אינטגרציות שבורות, הוסף את התלות באופן ידני: Android (android/app/build.gradle):

dependencies {
    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.fbjni'
    }
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.fbjni'
    }
    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
}

Application.kt:

if (BuildConfig.DEBUG) {
    SoLoader.init(this, false)
    val client = AndroidFlipperClient.getInstance(this)
    client.addPlugin(InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()))
    client.addPlugin(NetworkFlipperPlugin())
    client.addPlugin(SharedPreferencesFlipperPlugin(this))
    client.start()
}

קריטי: Flipper רק למבני debug. בדיקת dependencies { debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { exclude group:'com.facebook.fbjni' } debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.fbjni' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") } היא חובה—ה-SDK לא חייב לאתחל במבני release.

מה מציע Network Inspector

התוסף השימושי ביותר. הוא מציג את כל בקשות ה-HTTP עם כותרות, גופים וזמני תגובה. עבור React Native, הוא מתחבר ל-if (BuildConfig.DEBUG) { SoLoader.init(this, false) val client = AndroidFlipperClient.getInstance(this) client.addPlugin(InspectorFlipperPlugin(this, DescriptorMapping.withDefaults())) client.addPlugin(NetworkFlipperPlugin()) client.addPlugin(SharedPreferencesFlipperPlugin(this)) client.start() } ו-if (BuildConfig.DEBUG) אוטומטית. עבור Android מקורי עם OkHttp:

val networkInterceptor = FlipperOkhttpInterceptor(NetworkFlipperPlugin())
OkHttpClient.Builder()
    .addNetworkInterceptor(networkInterceptor)
    .build()

Flipper עולה על Chrome DevTools בניפוי מקורי—הוא מספק בערך פי 3 יותר מידע על התנהגות זמן הריצה של האפליקציה שלך.

סקירת תוספי Flipper

Layout Inspector ותוספים אחרים

אנלוגיה ל-Elements של Chrome DevTools עבור ממשק משתמש מקורי. לחץ על כל רכיב במסך כדי לראות את המאפיינים המקוריים שלו: מידות אמיתיות, שוליים, מאפייני נגישות. עבור React Native, זה שימושי במיוחד לניפוי פריסת Yoga—אתה רואה ערכי flex מחושבים שאינם נראים בבודק JS.

תוספים נוספים: תוסף SharedPreferences Flipper לצפייה ועריכה של SharedPreferences, תוסף Fresco לתמונות, Crash Reporter ללוגי קריסה.

FLIPPER_VERSION=0.182.0