Five minutes implementation, a RN app development debugging tool

Time:2020-11-18

In the development process of react native, as developers, we often do things that are laborious and not “flattering”, which takes up a lot of our time

  • To locate a bug, the general process is as follows:

    1. According to the bug description of the test student, log in to the specified account and go through it to verify whether the problem exists.
    2. If there is a bug, re verify the existence of the bug in the debug mode of app, and check the log or breakpoint debugging to see if the memory data source and processing are correct
    3. In the end, it is likely to prove that this bug is just a background data problem, not an app bug
  • Multi environment packaging

    1. The server has multiple environments, and the test steps are generally from the test line = > pre production = > formal line, which means that the same set of code needs three packages (or at least three hot updates). Why not build a flat server environment and switch dynamically?

Finally, locating the bug is the background data problem: the root cause of this problem is that the test students do “black box test”, and the steps we take to reproduce are also “black box verification”. If this testing method is not solved, the above embarrassing problems will always exist.

How to solve the problem of “black box testing” and “black box verification”? The answer is: open logs.
If we show the app data stream in front of the development students (at least open the HTTP request data stream and basic log output), it will be easier for test students and ourselves to locate the problems of a large number of bugs.

How to “open” these logs? adoptreact-native-debug-toolLibrary, only a few lines of code can be used to implement a development debugging tool, through which we can display the logs we want to “open” in the form of UI anytime and anywhere. Let’s take a look at what this development and debugging tool library can do:

  • Provide a global floating point entrance, always at the top level, not affected by page switching
  • Support to record HTTP requests, parse data and display (APP actively calls records)
  • Support recording WebView and URL request (APP calls record actively)
  • Support environment list display and switch callback (depending on the implementation of APP)
  • The data of any record can be copied and pasted (by clicking on each item)

Let’s take a look at a few renderings

Five minutes implementation, a RN app development debugging tool

debug_tool.jpg

It can be seen that there are detailed records of ordinary logs, HTTP requests, and WebView loading. Since the data is clear at a glance, it is not easy to find bugs in the app due to data problems. Will it be very complicated for us to integrate this development tool?

  1. Install NPM install react native debug tool — save or yarn add react native debug tool
  2. Install react native root siblings
  3. Show debugger float
import RootSibling from 'react-native-root-siblings';
DebugManager.showFloat(RootSibling)
  1. Log HTTP request: via DebugManager.appendHttpLogs () record
fetch(url, params).then((response) => {
   DebugManager.appendHttpLogs({url, ...params}, response)
})
  1. Logging WebView logs: via DebugManager.appendWebViewLogs () record
<WebView source={{uri: url}}
         onNavigationStateChange={params => {
             DebugManagerDebugManager.appendWebViewLogs(params.url);
         }}
/>
  1. Record general log: via DebugManager.appendLogs () record
static log(...args) {
    DebugManager.appendLogs(args.join(''))
}

In this way, through the above 6 steps can achieve all the functions in the above effect map, is not very simple, can be done in a few minutes. In the future, both test students and developers can easily locate the bug by looking at the log.

Of course, the app connection server environment handover is mentioned before, which in fact depends on the implementation of app’s Http request encapsulation. The current debugging tool only provides a server environment display and selection function, as shown in the figure:

Five minutes implementation, a RN app development debugging tool

server_list.jpg

Implementation code:

DebugManager.initDeviceInfo(DeviceInfo)
    .initServerUrlMap(serverUrlMap, RNStorage.baseUrl, (baseUrl) => {
        Xhttpconfig(). Initbaseurl (baseurl); // reset HTTP and call baseurl according to the actual situation
        RNStorage.baseUrl = baseUrl;
        setTimeout(() =>  Alert.alert ('environment switch', 'server environment has been switched to' + baseurl), 1000)
    });

Note: the display of current device information depends on the ‘react native device info’ library
You need to introduce a dependency in the calling page:import DeviceInfo from 'react-native-device-info';And pass DeviceInfo into the initialization parameter of debugmanager.

At this point, all the functions of the debugging development tool are fully realized, and you can run the detailed use casesExamplesProcedures, everything is clear, welcome friends star!

In addition, I have an open source project, which can greatly improve the development speed of RN projects. If you are interested, you can learn:

  • Project Name:react-native-easy-app
  • First introduction: data storage