在React Native開發過程中，做爲開發人員，我們經常做着費力不“討好”的事情，這樣佔用我們不少時間：
-
定位bug，通常流程是：
- 按測試同學的的bug描述，登錄指定的賬號走一遍驗證一下問題是否存在。
- 若bug存在則，在app的調試模式下再驗證是否存在，並查看日誌或者斷點調試查看內存數據的來源及處理是否正確
- 最後很有可能惱火的證明這個bug只是後臺數據問題，而不是App的bug 😫😫😫
-
多環境打包
- 服務器有多個環境，測試步驟一般是從測試線 => 預生產 => 正式線，這就意味着同一套代碼需要打3個包（或者至少需要發3次熱更新），爲啥不做成連平服務器環境可以動態切換呢？
最後定位bug是後臺數據問題：出現這種問題的根本原因是因爲測試同學做的是“黑盒測試”，我們拿過來重現的步驟也是“黑盒驗證”，這種測試方式不解決，上面那種尷尬的問題永遠會存在。
怎麼解決“黑盒測試”、“黑盒驗證”問題呢？答案是：開放日誌。
如果我們把app的數據流都展示在開發同學面前（至少把http請求數據流和基本日誌輸出開放），這樣無論是測試同學還我們自己就能更容易的定位很大一部分bug的問題所在。
怎麼“開放”這些日誌？通過**react-native-debug-tool** 庫，只需要幾行代碼就能實現一個開發調試工具，通過它，我們可以把我們想要“開放”的日誌都以UI的形式隨時隨地展示出來。下面我們看看這個開發調試工具庫能做什麼：
- 提供一個全局懸浮點入口，永遠在最頂層，不受頁面切換的影響
- 支持記錄http請求，並解析數據並展示（app主動調用記錄）
- 支持記錄webView加url請求（app主動調用記錄）
- 支持環境列表展示與切換回調（依賴於app的實現）
- 任何一項記錄的數據都可以（通過點擊每一項進行）複製、粘貼
先來看幾張效果圖：
可以看出普通日誌，Http請求，webView的加載等都有詳細的記錄，因爲數據一目瞭然，就不容易出現因爲數據問題給app的bug的情況了，那我們集成這個開發工具會不會很複雜呢？
- 安裝 npm install react-native-debug-tool --save or yarn add react-native-debug-tool
- 安裝 react-native-root-siblings 【若當前項目沒有則需要安裝些，目前只支持 3.x 版本】
- 顯示調試工具浮點
import RootSibling from 'react-native-root-siblings';
DebugManager.showFloat(RootSibling)
- 記錄Http請求日誌：通過 DebugManager.appendHttpLogs() 記錄
fetch(url, params).then((response) => {
DebugManager.appendHttpLogs({url, ...params}, response)
})
- 記錄webView日誌：通過 DebugManager.appendWebViewLogs() 記錄
<WebView source={{uri: url}}
onNavigationStateChange={params => {
DebugManagerDebugManager.appendWebViewLogs(params.url);
}}
/>
- 記錄普通日誌：通過 DebugManager.appendLogs() 記錄
static log(...args) {
DebugManager.appendLogs(args.join(''))
}
就這樣通過以上6步就能實現上面效果圖中的所有功能了，是不是很簡單，幾分鐘的時間就能搞定。以後，無論是測試同學還是開發人員都可以通過查看日誌更方便的定位問題的bug在哪兒。
當然，前面有提到app的連接服務器環境切換的問題，這個實際上還得依賴於app的Http請求封裝的實現，當前調試工具只提供一個服務器環境展示與選擇功能，如圖所示：
實現代碼：
DebugManager.initDeviceInfo(DeviceInfo)
.initServerUrlMap(serverUrlMap, RNStorage.baseUrl, (baseUrl) => {
RFHttpConfig().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-fast-app
- 第一篇介紹：數據存儲
如果有任何疑問，歡迎掃碼加入RN技術QQ交流羣
