Carter Chen

Follow

--

本篇文章將探討在App開發過程中常見的一些狀況，並且介紹如何透過Flipper這個工具來幫助我們更有效率的解決這些問題，以達到降低痛苦指數的目的（甚至是昏迷指數），還有獲得比較開心的App開發體驗🥰

身為一個App工程師，在開發/維護App的時候，我們常常會遇到以下的情境：

一般情況下，我們都如何處理這些問題呢？

以上列出來的處理方式，並不是不好的處理方式，在一般情況下，已經算是正常的處理方式了。

只是在處理相關問題的時候，通常會比較難在很短的時間內，用絕對的信心指出問題出在哪個地方；一般會經歷多次測試後，才會確認我們正在修改的檔案，就是手機上的那個畫面。

對於查看畫面階層的結構，Android Studio已經提供了Layout Inspector來協助我們，除了基本的階層查看功能以外，它也提供了滿炫砲的3D檢視。但可能是因為這個功能還在初期開發的階段，使用起來拖慢許多IDE的效能，而瀏覽結構複雜的畫面時，有時也會發生需要非常久才能把畫面render出來的情形，有時甚至會卡死整個render不出來。

跟Network API相關的bug，如果App的連線工具是使用OkHttp的話，OkHttp也有提供logging-interceptor來印出HTTP request/response的log，讓我們能透過IDE的logcat來查看是不是後端給APP的response中有數值給錯了，所以才讓App的功能產生問題。只是因為IDE的logcat有行數限制，而且如果log的內容太長，也會有被截斷的問題，加上還會有其他的log一直分散你的注意力，不做其它調整的話，logging-interceptor在debug上的加分效果還是有限的。

揪竟～Flipper到底是什麼呢？

引述Flipper官方README的內容：

Flipper (formerly Sonar) is a platform for debugging mobile apps on iOS and Android. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.

Flipper是一個for Android與iOS使用的App debug工具，它是一個桌面版的應用程式，可以幫助你視覺化、檢視以及讓你操控你的App。

跟在ptt要發言要附上人權指數一樣，先放一下Flipper的人權指數：

Flipper是一個由Facebook公開的open source project，截至今天2/27日為止，已經累積了8000多個stars，也因為它是個open source project，未來還會繼續的進步下去！

關於Flipper目前開放的功能（有其他功能想要的話可以去開issue許願），目前已知比較常用的Plugins有：

還有其他如Deeplinks、Database、Fresco、LeakCanary之類的Plugin，有興趣都可以裝起來玩玩。

接下來將介紹如何將Flipper與常用的Plugins應用在App開發上。

以下將以維基百科官方Android App為例，示範Flipper如何帶領團隊新人認識整個App。

如果安裝上沒有問題，應該會看到以下的畫面。畫面左邊的Layout/Network/Shared Preferences Viewer分別對應到我們替App所設定的Plugins。

緊接著我們就朝下一步前進吧！InitialOnboardingActivity是導覽頁，總共有4個頁面，讓我們快轉到最後一頁吧！

我們可以在Flipper裡面一層一層地將畫面的結構展開，這時也可以順便了解這個畫面大概是用了什麼元件構成的（以InitialOnboardingActivity為例，就是用了Fragment還有ViewPager2），而當我們的游標選取了某個元件，手機上也會有顏色區域，將我們選到的元件Highlight出來：

Flipper還有live preview的功能。假設我想要把最後一頁的「入門」按鈕文案換掉，畫面會長成怎樣呢？在Flipper上，甚至可以讓你在不用重新build App的狀態下，讓你直接在手機上看到你設定的變動。

484 很棒😎？透過Flipper的Layout Inspector，不管UI設計得有多麼複雜，所有的一切都將一覽無遺。對一個團隊的新人來說，在操作App的同時，他也可以很快地知道目前的畫面應該對應到程式碼的哪一個Class。

所有App打出去的API request/response，都會被收集到這裡。

你再也不用下log去追response了。甚至，這個Plugin還提供了模擬response的功能，讓你可以去把response修改成你要的樣子，看看在App上的呈現會怎麼樣（下次再介紹，雖然大家說下次再約就是不會再約的意思）。

這個Plugin會將App保存的所有資料，按照檔案進行分類，選取對應的檔案名稱即可查看內容：

可以透過選單來選擇要查看的Shared Preference：

假設我們想看org.wikipedia.dev_preferences這個檔案的內容，選取對應的選項即可查看（但為了保護當事人，打一下馬賽克，因為如果我是project owner，我也不會希望有太多敏感資訊赤裸裸的暴露在網路上XD）

透過Shared Preferences的這個Plugin，新人可以很快的知道這個App會保存哪些資料。當然，你想直接修改，那也是可以的：

看完了本文，是不是對Flipper這個工具有更深的認識了呢？透過Flipper，應該可以降低許多在追code上會遇到的難題，大幅提升開發效率。（尤其是當你接到一個沒有半個xml檔案的App的時候😫）

但其實基本上trace code是每個工程師應該必備的基本能力，工程師應該都必須要擁有在不透過任何工具協助的情況下，找出問題並修復問題的能力。

雖然Android Studio內建的功能已經相當強大，也時不時有新的功能推出，但畢竟Android Studio並不是個開源專案，開發者的心聲比較沒辦法能夠太快的被聽見，在想要的功能還沒有被實現出來的這個階段，不妨先用Flipper當成Android Studio的Extension，享用更完整的功能吧！