Flipper: คืออะไร คุณสมบัติ และการประยุกต์ใช้

Flipper คืออะไร?

Flipper เป็นแพลตฟอร์มการดีบักแอปมือถือแบบโอเพนซอร์สที่สร้างโดย Facebook (Meta) ในปี 2018 โปรเจกต์นี้เดิมชื่อ Sonar และมีไว้สำหรับการใช้ภายในบริษัท แต่ในปี 2019 Meta ได้เผยแพร่ซอร์สโค้ดภายใต้ใบอนุญาต MIT แพลตฟอร์มประกอบด้วยสองส่วน: แอปพลิเคชันเดสก์ท็อปที่ใช้ Electron และ SDK ที่ผสานรวมกับโปรเจกต์ Android และ iOS

ความแตกต่างหลักระหว่าง Flipper และเครื่องมือดีบักอื่นๆ คือสถาปัตยกรรมแบบโมดูลาร์ แทนที่จะเป็นดีบักเกอร์แบบเสาหิน นักพัฒนาเชื่อมต่อเฉพาะปลั๊กอินที่จำเป็นจริงๆ ในโปรเจกต์เท่านั้น ซึ่งช่วยลดภาระบนแอปพลิเคชันและทำให้อินเทอร์เฟซง่ายขึ้น: ดีบักเกอร์จะแสดงสิ่งที่นักพัฒนาเลือกเท่านั้น Android Studio มีโปรไฟล์ในตัว แต่ทำงานผ่าน ADB เท่านั้นและไม่มีการปรับแต่งในระดับเดียวกับ Flipper

ตามข้อมูลของ Meta Flipper ถูกใช้ในมากกว่า 2000 โปรเจกต์ภายในบริษัทและรองรับการผสานรวมกับ Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite และไลบรารียอดนิยมอื่นๆ แพลตฟอร์มนี้เข้ากันได้กับ Android API 16+ และ iOS 11+

สถาปัตยกรรม Flipper: การสื่อสารระหว่างเดสก์ท็อปและอุปกรณ์ทำงานอย่างไร

สถาปัตยกรรม Flipper สร้างขึ้นบนโมเดลไคลเอ็นต์-เซิร์ฟเวอร์ แอปพลิเคชันเดสก์ท็อปทำหน้าที่เป็นเซิร์ฟเวอร์ และอุปกรณ์มือถือทำหน้าที่เป็นไคลเอ็นต์ การเชื่อมต่อถูกสร้างขึ้นผ่าน USB หรือ TCP/IP หลังจากนั้นจะเริ่มการแลกเปลี่ยนข้อความสองทิศทางโดยใช้โปรโตคอล Flipper ที่ใช้ WebSocket

ฝั่ง Android การสื่อสารจัดทำโดยไลบรารี android-client ซึ่งใช้ ADB ในการทำอุโมงค์การรับส่งข้อมูล ไคลเอ็นต์ iOS เชื่อมต่อผ่าน idb (iOS Device Bridge) ซึ่งเป็นการพัฒนาเฉพาะของ Meta สำหรับการโต้ตอบกับอุปกรณ์ iOS โดยไม่ต้องใช้ Xcode ภายในแอปพลิเคชัน ปลั๊กอินแต่ละตัวจะลงทะเบียนกับ FlipperClient และรับช่องทางการสื่อสารของตัวเองกับคู่หูฝั่งเดสก์ท็อป

กระบวนการถ่ายโอนข้อมูลทำงานดังนี้: ปลั๊กอินบนอุปกรณ์ส่งเหตุการณ์ผ่าน FlipperClient ไคลเอ็นต์ทำให้เป็นซีเรียลเป็น JSON และส่งผ่าน WebSocket ไปยังเดสก์ท็อป แอปพลิเคชันเดสก์ท็อปดีซีเรียลไลซ์ข้อความและส่งไปยังปลั๊กอินที่เกี่ยวข้องในอินเทอร์เฟซ ตาม บล็อกเทคนิคของ Meta (2024) ความหน่วงในการส่งข้อความน้อยกว่า 15 มิลลิวินาทีเมื่อเชื่อมต่อ USB

วิธีการติดตั้งและกำหนดค่า Flipper

การติดตั้ง Flipper ประกอบด้วยสามขั้นตอน: ติดตั้งแอปพลิเคชันเดสก์ท็อป เพิ่ม SDK ในโปรเจกต์ และเปิดดีบักเกอร์ แอปพลิเคชันเดสก์ท็อปดาวน์โหลดจากเว็บไซต์ทางการ fbflipper.com — มีบิลด์สำหรับ Windows, macOS และ Linux ในรูปแบบ dmg, exe และ AppImage หลังการติดตั้ง แอปพลิเคชันจะตรวจจับอุปกรณ์ที่เชื่อมต่อผ่าน ADB โดยอัตโนมัติ

สำหรับโปรเจกต์ Android Flipper เชื่อมต่อผ่าน dependencies ใน build.gradle คุณต้องระบุเวอร์ชัน Flipper ที่ตรงกับเวอร์ชันไคลเอ็นต์เดสก์ท็อปและเพิ่มปลั๊กอินสำหรับไลบรารีที่ใช้ ด้านล่างคือตัวอย่างการกำหนดค่าสำหรับโปรเจกต์ Kotlin:

// build.gradle (แอป)
val flipperVersion = "0.265.0"

dependencies {
    debugImplementation("com.facebook.flipper:flipper:$flipperVersion")
    debugImplementation(
        "com.facebook.flipper:flipper-network-plugin:$flipperVersion"
    )
    debugImplementation(
        "com.facebook.flipper:flipper-litho-plugin:$flipperVersion"
    )
}

หลังจากการซิงค์ Gradle คุณต้องเริ่มต้น FlipperClient ในคลาส Application การเริ่มต้นทำในบิลด็แบบดีบัก — ไม่ควรเชื่อมต่อไลบรารีในเวอร์ชันเผยแพร่เพื่อไม่ให้เปิดเผยข้อมูลการดีบักแก่ผู้ใช้

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        if (BuildConfig.DEBUG) {
            SoLoader.init(this, false)
            AndroidFlipperClient
                .getInstance(this)
                .addPlugin(NetworkFlipperPlugin())
                .start()
        }
    }
}

สำหรับ iOS Flipper ถูกเพิ่มผ่าน CocoaPods ใน Podfile ระบุเฟรมเวิร์ก Flipper และ FlipperKit รวมถึง Flipper-Folly และ Flipper-PeerTalk สำหรับจัดช่องทางการสื่อสาร หลังจาก pod install และรันแอปพลิเคชันบนซิมูเลเตอร์หรืออุปกรณ์ ไคลเอ็นต์เดสก์ท็อปจะตรวจจับเซสชันใหม่โดยอัตโนมัติ

การตรวจสอบการเชื่อมต่อ

หลังจากเปิดแอปพลิเคชัน ให้เปิด Flipper เดสก์ท็อป — รายการอุปกรณ์ที่เชื่อมต่อจะปรากฏในแผงด้านซ้าย หากอุปกรณ์ไม่แสดง ให้ตรวจสอบ: ติดตั้ง ADB หรือไม่ เปิดการดีบัก USB บน Android หรือไม่ หรือบริดจ์ idb สำหรับ iOS ทำงานอยู่หรือไม่ อุปกรณ์แต่ละเครื่องจะแสดงพร้อมชื่อรุ่นและเวอร์ชัน ระบบปฏิบัติการ

ปลั๊กอิน Flipper สำหรับ Android และ iOS

ปลั๊กอิน Flipper เป็นส่วนขยายแบบโมดูลาร์ที่เพิ่มแผงในอินเทอร์เฟซเดสก์ท็อปสำหรับงานเฉพาะ Meta บำรุงรักษาปลั๊กอินทางการสำหรับไลบรารียอดนิยม: Network Plugin สำหรับ OkHttp และ URLSession, Database Plugin สำหรับ SQLite และ Realm, Layout Inspector สำหรับลำดับชั้น View, SharedPreferences Plugin และ Crash Reporter

นอกจากปลั๊กอินทางการแล้ว ยังมีระบบนิเวศของ ปลั๊กอินของบริษัทอื่น ที่พัฒนาโดยชุมชน ตัวอย่างเช่น MMKV Plugin สำหรับดีบักพื้นที่เก็บข้อมูล Tencent MMKV, Redux Debugger สำหรับ React Native, LeakCanary Plugin สำหรับตรวจจับการรั่วไหลของหน่วยความจำ ปลั๊กอินถูกเผยแพร่ผ่าน Maven Central และ CocoaPods และเชื่อมต่อเป็น dependencies ปกติ

ข้อได้เปรียบที่สำคัญของ Flipper คือความสามารถในการเขียนปลั๊กอินแบบกำหนดเอง ปลั๊กอินประกอบด้วยสองส่วน: ส่วนไคลเอ็นต์ (ใน Kotlin หรือ Swift) ที่ลงทะเบียนในแอปมือถือ และส่วนเดสก์ท็อป (ใน TypeScript หรือ JavaScript) ที่เพิ่มแผง UI ในอินเทอร์เฟซ Meta มี API สำหรับสร้างปลั๊กอินแบบกำหนดเองที่รองรับ WebSocket และข้อความ JSON

ปลั๊กอินหลักสำหรับ Android

การดีบักเครือข่ายผ่าน Flipper

Network Plugin เป็นหนึ่งในปลั๊กอิน Flipper ยอดนิยมที่สุด มันสกัดกั้นคำขอ HTTP/HTTPS ทั้งหมดที่ผ่าน OkHttp บน Android หรือ URLSession บน iOS และแสดงในอินเทอร์เฟซเดสก์ท็อปแบบเรียลไทม์ สำหรับแต่ละคำขอมีข้อมูล: URL, เมธอด, รหัสสถานะ, ส่วนหัวของคำขอและการตอบกลับ, เนื้อหาของคำขอและการตอบกลับ, เวลาดำเนินการ และขนาด

ในการเชื่อมต่อ Network Plugin บน Android เพียงเพิ่ม dependency flipper-network-plugin และส่ง OkHttpClient ไปยังคอนสตรักเตอร์ของ NetworkFlipperPlugin Flipper จะห่อ OkHttpClient ในตัวสกัดกั้นโดยอัตโนมัติ บน iOS ปลั๊กอินการผสานรวม URLSession ต้องการการกำหนดค่าผ่าน FlipperNetworkInterceptor

val networkPlugin = NetworkFlipperPlugin()
val client = OkHttpClient.Builder()
    .addNetworkInterceptor(networkPlugin)
    .build()

คุณสมบัติสำคัญของ Network Plugin คือการรองรับการค้นหาและกรองคำขอ นักพัฒนาสามารถกรองคำขอตาม URL, เมธอด, รหัสสถานะ หรือประเภทเนื้อหา สามารถบังคับให้ลองคำขอใดๆ ซ้ำจากอินเทอร์เฟซ — ซึ่งมีประโยชน์สำหรับการทดสอบปลายทางโดยไม่ต้องเขียนคำขอ curl แยกต่างหาก ตาม การสำรวจนักพัฒนา Meta (2024) Network Plugin ถูกใช้ใน 78% ของโปรเจกต์ที่ติดตั้ง Flipper

การดีบักฐานข้อมูลและ SharedPreferences

Database Plugin ให้การเข้าถึงฐานข้อมูล SQLite และ Realm โดยตรงจากไคลเอ็นต์เดสก์ท็อป นักพัฒนาจะเห็นตารางทั้งหมด โครงสร้าง และเนื้อหาในมุมมองตาราง สามารถดำเนินการคำสั่ง SQL ตามต้องการ และเพิ่ม แก้ไข ลบระเบียนโดยไม่ต้องเขียนโค้ด ซึ่งช่วยเร่งการดีบักสถานะแอปพลิเคชันได้อย่างมากเมื่อเทียบกับการใช้ adb shell

SharedPreferences Plugin ทำงานคล้ายกัน: แสดงคีย์และค่าทั้งหมดที่เก็บใน SharedPreferences บน Android การแก้ไขเกิดขึ้นทันที — การเปลี่ยนแปลงจะเห็นได้ทันทีในแอปพลิเคชัน อย่างไรก็ตาม มีข้อจำกัดสำคัญ: หลังจากรีสตาร์ทแอปพลิเคชัน Flipper จะเชื่อมต่อใหม่ และการเปลี่ยนแปลงทั้งหมดที่ทำผ่านปลั๊กอินจะถูกเก็บไว้เนื่องจากถูกนำไปใช้กับไฟล์ SharedPreferences โดยตรง

สำหรับ iOS สิ่งที่เทียบเท่าคือ NSUserDefaults Plugin มันทำงานกับ UserDefaults และแสดงคู่คีย์-ค่าที่บันทึกไว้ทั้งหมด ปลั๊กอินรองรับการแก้ไขสตริง ตัวเลข วันที่ และอาร์เรย์ การเปลี่ยนแปลงจะถูกนำไปใช้ทันทีเนื่องจาก Flipper เข้าถึง UserDefaults ผ่านอินเทอร์เฟซรันไทม์

Layout Inspector และการบันทึก

Layout Inspector ของ Flipper ให้การแสดงภาพของลำดับชั้น View บน Android นักพัฒนาเห็นแผนผังคอมโพเนนต์ คุณสมบัติ (ความกว้าง ความสูง ระยะห่าง พื้นหลัง ข้อความ) และสามารถเลือกองค์ประกอบใดๆ บนหน้าจออุปกรณ์ได้แบบโต้ตอบ นี่เป็นทางเลือกแทน Layout Inspector ในตัวใน Android Studio แต่มีความแตกต่างสำคัญ — Flipper แสดงลำดับชั้นแบบเรียลไทม์โดยไม่หยุดแอปพลิเคชัน

สำหรับการบันทึก ใช้ Logs Plugin บันทึกทั้งหมดจาก Logcat จะปรากฏในอินเทอร์เฟซเดสก์ท็อปพร้อมการกรองตามระดับ (Debug, Info, Warn, Error) และแท็ก แตกต่างจาก Android Studio Logcat อินเทอร์เฟซของ Flipper ไม่ทำให้หน้าจอรกรุงรัง — บันทึกจะถูกจัดกลุ่มตามแท็กและเน้นตามระดับ รองรับการค้นหาและส่งออกบันทึกเป็น JSON

อีกหนึ่งคุณสมบัติที่มีประโยชน์คือ Console Plugin ซึ่งแสดง console.log จากโค้ด JavaScript ในคอมโพเนนต์ React Native หรือ WebView ซึ่งช่วยให้การดีบักแอปพลิเคชันไฮบริดง่ายขึ้น: นักพัฒนาเห็นทั้งบันทึกดั้งเดิมและบันทึก JS ในอินเทอร์เฟซเดียว ปลั๊กอินรองรับการกรองตามแหล่งที่มา (Native หรือ JS) และ ระดับการบันทึก

การกำหนดค่าปลั๊กอิน Flutter

สำหรับแอปพลิเคชัน Flutter Flipper เชื่อมต่อผ่านแพ็กเกจ flipper จาก pub.dev ปลั๊กอิน flutter_flipper ให้การผสานรวมกับเลเยอร์เครือข่าย Dio พื้นที่เก็บข้อมูล SharedPreferences และการนำทาง Flutter การติดตั้งต้องการเพิ่ม dependency ใน pubspec.yaml และเริ่มต้น FlipperClient ในฟังก์ชัน main ของแอปพลิเคชัน ปลั๊กอิน Flutter ยังด้อยกว่าปลั๊กอินดั้งเดิมในด้านฟังก์ชัน แต่ครอบคลุมสถานการณ์การดีบักหลัก

ประสิทธิภาพระหว่างการดีบัก

Flipper ใช้ทรัพยากรอุปกรณ์และเดสก์ท็อปตามสัดส่วนของจำนวนปลั๊กอินที่ทำงานอยู่ เมื่อเชื่อมต่อปลั๊กอินทั้งหมดพร้อมกันบนอีมูเลเตอร์ Android จะสังเกตเห็นประสิทธิภาพลดลง 5–10% ตาม การวัดของ Meta (2024) ขอแนะนำให้เชื่อมต่อเฉพาะปลั๊กอินที่จำเป็นและปิดการใช้งานปลั๊กอินที่ไม่ใช้ผ่านอินเทอร์เฟซแอปพลิเคชันเดสก์ท็อป