Forem: chende

react-native-debug-tool

chende — Sat, 09 May 2020 05:53:45 +0000

react-native-debug-tool （开发调试工具）

安装

npm install react-native-debug-tool --save

or yarn add react-native-debug-tool

功能点

支持显示设备信息：依赖于 react-native-device-info 基础库
支持显示当前App的Http请求记录
支持显示示当前App的WebView加载记录
支持App连接服务器环境切换

用法

初始化方法：

  DebugManager.initDeviceInfo(DeviceInfo)
  .initServerUrlMap(serverUrlMap, currentUrl, (baseUrl) => {

  });

  注：初始化方法为非必需方法，如果项目不需要支持【环境切换】与【设备信息查看】功能，可以不调用此方法

  // DeviceInfo => react-native-device-info 库的DeviceInfo对象

  // serverUrlMap => 连接服务器环境 key value Map集合
     如：new Map([['test001','https://domain-001.net'],['test002','https://domain-002.net']])

  // serverUrl => 默认连接的服务器环境 如：https://domain-001.net

  // baseUrl => 环境切换回调的当前的连接服务器环境

功能1：展示设备信息（只要在初始化的时候传入DeviceInfo对象即可）

功能2：展示当前App的Http请求记录


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

功能3：展示当前App的WebView加载记录


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

功能4：App连接服务器环境切换(在初始化的时候传入severUrlMap及serverUrl，在回调的时候存在本地供Http使用)

调出调试工具入口：


import RootSibling from 'react-native-root-siblings';

DebugManager.showFloat(RootSibling) //在App内需要的地方调用些方法展示工具入口浮点

// only support react-native-root-siblings 3.x

详细使用方法请参考示例

五分钟实现，一个RN App开发调试工具

chende — Sun, 26 Apr 2020 10:58:51 +0000

在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的情况了，那我们集成这个开发工具会不会很复杂呢？

安装

npm install react-native-debug-tool --save

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交流群

react-native-easy-app

chende — Wed, 01 Apr 2020 03:11:33 +0000

react-native-easy-app （React Native One-stop solution）

查看中文文档

Instruction Manual

Installation

npm install react-native-easy-app --save

yarn add react-native-easy-app

Features

Support for fast synchronous access to AsyncStorage
Support for flexible Http requests through optional configuration
Support for Flexible base widget (no sensory multi-screen adaptation)

Quick Start

Data Storage : XStorage

*Implement a persistent data store manager

    import { XStorage } from 'react-native-easy-app';
    import { AsyncStorage } from 'react-native';

    export const RNStorage = {// RNStorage : Custom data store object
        token: undefined, // Custom string value
        isShow: undefined, // Custom bool value
        userInfo: undefined, // Custom object
    };

    const initCallback = () => {

         // From now on, you can write or read the variables in RNStorage synchronously

         // be similar to [console.log(await AsyncStorage.getItem('isShow'))]
         console.log(RNStorage.isShow); 

         // be similar to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
         RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 

         // be similar to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
         RNStorage.userInfo = {name: 'rufeng', age: 30}; 
    };

    XStorage.initStorage(RNStorage, AsyncStorage, initCallback);

Configurable Http request framework

All based on configuration (configuration optional, free to set)

  import { XHttpConfig } from 'react-native-easy-app';

  XHttpConfig().initHttpLogOn(true) // Print the Http request log or not
                .initBaseUrl(ApiCredit.baseUrl) // BaseUrl
                .initContentType(XHttpConst.CONTENT_TYPE_URLENCODED)
                .initHeaderSetFunc((headers, request) => {
                   // Set the public header parameter here
                })
                .initParamSetFunc((params, request) => {
                 // Set the public params parameter here
                })
                .initParseDataFunc((result, request, callback) => {
                   let {success, json, response, message, status} = result;
                   // Specifies the specific data parsing method for the current app
            });

Send request template

    import { XHttp } from 'react-native-easy-app';

    let url = 'v1/account/login/';
    let param = {phone: '18600000000', authCode: '123456'};
    let header = {Authorization: "Basic Y3Rlcm1pbmF......HcVp0WGtI"};
    let callback = () => (success, json, message, status) => { // Request a result callback
         if (success) {
            showToast(JSON.stringify(json))
         } else {
            showToast(msg)
         }
    };

    * Settable parameters are spliced in builder form
    XHttp().url(url)
        .param(param)
        .header(header)
        .internal()
        .rawData()
        .pureText()
        .encodeURI()
        .timeout(10000)
        .extra({tag: 'xx'})
        .contentType('text/xml')
        .resendRequest(data, callback) // Rerequest (used to refresh accessToken to resend a request that has failed)
        .loadingFunc((loading)=> showLoading('Please wait for a moment ...', loading))
        .[formJson|formData|formEncoded]()
        .[get|post|put|patch|delete|options](callback);

request-send

     import {XHttp} from 'react-native-easy-app';

     const url = 'https://www.google.com';

     * Synchronous request
     const response = await XHttp().url(url).execute('GET');
     const {success, json, message, status} = response;

     if(success){
        this.setState({content: JSON.stringify(json)})
     } else {
        showToast(message)
     }

     * Asynchronous requests
     XHttp().url(url).get((success, json, message, status)=>{
         if (success){
            this.setState({content: JSON.stringify(json)});
         } else {
            showToast(msg);
         }
     });

     * Asynchronous requests
     XHttp().url(url).execute('GET')
     .then(({success, json, message, status}) => {
         if (success) {
              this.setState({content: JSON.stringify(json)});
         } else {
              showToast(message);
         }
      })
      .catch(({message}) => {
          showToast(message);
      })
    ```


 * Flexible base widget

XImage
XText
XView
XFlatList

XImage Partial path online images depend on the Settings of image resource BaseUrl

Can be configured as follows before use：

XWidget
.initResource(Assets)
.initReferenceScreen(375, 677); // The component scales the reference screen size

Please refer to the detailed usage method example