五分钟实现，一个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交流群