A simple debug tool on React Native

react-native-debug-tool (development debugging tool)

installation

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

or yarn add react-native-debug-tool

function points

• Support display device information: depends on react-native-device-info basic library
• Support to display the Http request record of the current App
• Support to display the WebView loading record of the current App
• Support App connection server environment switching

usage

Initialization method:

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

})
.initStagingKeyMap(deployKeyMap, currentKey, (currentKey) => {

});

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

// 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 => 环境切换回调的当前的连接服务器环境

Function 1: Display device information (as long as the DeviceInfo object is passed in during initialization)

Function 2: Display the Http request record of the current App

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

Function 3: Display the WebView loading record of the current App

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

Function 4: App connection server environment switch (passed in severUrlMap and serverUrl when initializing, there are local for Http use when callback)

Call up the debugging tool entry:

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

DebugManager . ShowFloat ( RootSibling )  //Call some methods where needed in the App to show the tool entry floating point

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

Refer to detailed use of exemplary

Download Details:

Author: chende008

Source Code: https://github.com/chende008/react-native-debug-tool

#react-native #react #mobile-apps