五分鐘實現，一個RN App開發調試工具

在React Native開發過程當中，作爲開發人員，咱們常常作着費力不「討好」的事情，這樣佔用咱們很多時間：

• 定位bug，一般流程是：

  1. 按測試同窗的的bug描述，登陸指定的帳號走一遍驗證一下問題是否存在。
  2. 若bug存在則，在app的調試模式下再驗證是否存在，並查看日誌或者斷點調試查看內存數據的來源及處理是否正確
  3. 最後頗有可能惱火的證實這個bug只是後臺數據問題，而不是App的bug 😫😫😫

• 多環境打包

  1. 服務器有多個環境，測試步驟通常是從測試線 => 預生產 => 正式線，這就意味着同一套代碼須要打3個包（或者至少須要發3次熱更新），爲啥不作成連平服務器環境能夠動態切換呢？

最後定位bug是後臺數據問題：出現這種問題的根本緣由是由於測試同窗作的是「黑盒測試」，咱們拿過來重現的步驟也是「黑盒驗證」，這種測試方式不解決，上面那種尷尬的問題永遠會存在。

怎麼解決「黑盒測試」、「黑盒驗證」問題呢？答案是：開放日誌。 若是咱們把app的數據流都展現在開發同窗面前（至少把http請求數據流和基本日誌輸出開放），這樣不管是測試同窗還咱們本身就能更容易的定位很大一部分bug的問題所在。

怎麼「開放」這些日誌？經過**react-native-debug-tool** 庫，只須要幾行代碼就能實現一個開發調試工具，經過它，咱們能夠把咱們想要「開放」的日誌都以UI的形式隨時隨地展現出來。下面咱們看看這個開發調試工具庫能作什麼：

• 提供一個全局懸浮點入口，永遠在最頂層，不受頁面切換的影響
• 支持記錄http請求，並解析數據並展現（app主動調用記錄）
• 支持記錄webView加url請求（app主動調用記錄）
• 支持環境列表展現與切換回調（依賴於app的實現）
• 任何一項記錄的數據均可以（經過點擊每一項進行）複製、粘貼

先來看幾張效果圖：

能夠看出普通日誌，Http請求，webView的加載等都有詳細的記錄，由於數據一目瞭然，就不容易出現由於數據問題給app的bug的狀況了，那咱們集成這個開發工具會不會很複雜呢？

1. 安裝 npm install react-native-debug-tool --save or yarn add react-native-debug-tool
2. 安裝 react-native-root-siblings 【若當前項目沒有則須要安裝些，目前只支持 3.x 版本】
3. 顯示調試工具浮點

import RootSibling from 'react-native-root-siblings';
DebugManager.showFloat(RootSibling)

4. 記錄Http請求日誌：經過 DebugManager.appendHttpLogs() 記錄

fetch(url, params).then((response) => {
   DebugManager.appendHttpLogs({url, ...params}, response)
})

5. 記錄webView日誌：經過 DebugManager.appendWebViewLogs() 記錄

<WebView source={{uri: url}}
         onNavigationStateChange={params => {
             DebugManagerDebugManager.appendWebViewLogs(params.url);
         }}
/>

6. 記錄普通日誌：經過 DebugManager.appendLogs() 記錄

static log(...args) {
    DebugManager.appendLogs(args.join(''))
}

就這樣經過以上6步就能實現上面效果圖中的全部功能了，是否是很簡單，幾分鐘的時間就能搞定。之後，不管是測試同窗仍是開發人員均可以經過查看日誌更方便的定位問題的bug在哪兒。

固然，前面有提到app的鏈接服務器環境切換的問題，這個實際上還得依賴於app的Http請求封裝的實現，當前調試工具只提供一個服務器環境展現與選擇功能，如圖所示：

實現代碼：

DebugManager.initDeviceInfo(DeviceInfo)
    .initServerUrlMap(serverUrlMap, RNStorage.baseUrl, (baseUrl) => {
        XHttpConfig().initBaseUrl(baseUrl); // 重置Http請求baseUrl 根據實際狀況調用
        RNStorage.baseUrl = baseUrl;
        setTimeout(() => Alert.alert('環境切換', '服務器環境已經切換至' + baseUrl), 1000)
    });

注：當前設備信息的顯示依賴於 'react-native-device-info' 庫 需在調用頁面引入依賴：import DeviceInfo from 'react-native-device-info';並把DeviceInfo傳入到DebugManager的初始化參數中。

至此調試開發工具的全部功能就徹底實現了，詳細用例你們能夠運行 示例 程序,一切就明瞭，歡迎朋友們 Star！

另外我還有一個開源項目，經過它能夠極大的提升RN項目開發速度，你們有興趣能夠了解下：

• 項目名稱：react-native-easy-app
• 第一篇介紹：數據存儲

若是有任何疑問，歡迎掃碼加入RN技術QQ交流羣

若是有任何疑問，歡迎掃碼加入RN技術QQ交流羣