During React Native development, as developers, we often do things that are hard to “please” and take up a lot of our time:

  • The usual process for locating bugs is:

    1. According to the bug description of the test student, log in the specified account to verify whether the problem exists.
    2. If a bug exists, verify whether it exists in the debugging mode of the app, and check the log or breakpoint debugging to check whether the source of memory data and processing are correct
    3. In the end, it is likely to prove maddeningly that this bug is only a background data problem and not an App bug 😫😫😫

  • Multi-environment packaging

    1. The server has multiple environments, and the test procedure is generally from the test line => pre-production => official line, which means that the same set of code needs to hit 3 packages (or at least need to send 3 hot updates), why not make a flat server environment can dynamically switch?

Finally, the bug was identified as background data problem: the root cause of this problem was that the test students did “black box test”, and the steps we took to reproduce were also “black box verification”. If this test method is not solved, the above embarrassing problems will always exist.

How to solve the “black box test”, “black box verification” problem? The answer is: open logging. If we show the data flow of the app in front of the developers (at least open the HTTP request data flow and basic log output), it will be easier to locate a large part of the bug, whether testing students or ourselves.

How do I “open” these logs? With the React-Native debug-tool library, we can implement a development debugging tool with just a few lines of code, which allows us to display the logs we want “open” as UI anytime, anywhere. Let’s take a look at what this development debug library can do:

  • Provides a global hover point entry, always at the top level, not affected by page switching
  • Support logging HTTP requests, parsing data and displaying (app active call records)
  • Support recording webView and URL request (app active call record)
  • Support environment list display and switch callback (depending on app implementation)
  • Data from any record can be copied and pasted (by clicking on each entry)

Let’s take a look at some of the renderings:

debug_tool.jpg

It can be seen that ordinary logs, Http requests, webView loading and so on are recorded in detail. Because the data is clear at a glance, it is not easy to have bugs caused by data problems to the APP. 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 the react-native root-siblings app if the project does not have one. X version is only supported.
  3. Displays debugging tool floating point

import RootSibling from 'react-native-root-siblings';
DebugManager.showFloat(RootSibling)
Copy the code

  1. Record the Http request log: through DebugManager appendHttpLogs () records

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

  1. Record the webView log: through DebugManager appendWebViewLogs () records

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

  1. Log normal logs: log through debugManager.appendlogs ()

staticlog(... args) { DebugManager.appendLogs(args.join(' '))}Copy the code

So through the above 6 steps can achieve all the functions in the above renderings, is not very simple, a few minutes of time can be done. In the future, both testers and developers will be able to locate bugs more easily by looking at the logs.

Of course, the problem of switching the connection server environment of APP has been mentioned before, which actually depends on the implementation of APP’S Http request encapsulation. Currently, the debugging tool only provides a server environment display and selection function, as shown in the figure:

server_list.jpg

Implementation code:

DebugManager.initDeviceInfo(DeviceInfo)
    .initServerUrlMap(serverUrlMap, RNStorage.baseUrl, (baseUrl) => {
        XHttpConfig().initBaseUrl(baseUrl); // Reset the Http request baseUrl as required
        RNStorage.baseUrl = baseUrl;
        setTimeout((a)= > Alert.alert('Environment Switch'.'Server environment has been switched to' + baseUrl), 1000)});Copy the code

Import DeviceInfo from ‘react-native device-info’; import DeviceInfo from ‘react-native device-info’; And pass DeviceInfo into the DebugManager initialization parameter.

So far all the functions of debugging development tools are fully realized, detailed use cases we can run example procedures, everything is clear, welcome friends Star!

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

  • Project name: React-Native Easy-app
  • The first introduction: Data storage


If you have any questions, please scan code to join RN QQ communication group