React Native 的调试插件 reactotron

应用场景：使用的开发工具为 vscode ,windows 环境。

遇见的问题是：react native 的调试过程中，通过node.js 显示运行的结果，与打印出来的数据内容。但是在显示的数据内容会有一个问题，

如上图所示：会出现数据显示为object 的情况，非常不利于调试。感谢我的小伙伴儿，给我安利的这个插件。

这个插件的使用效果，就会显示你所有的网络请求，并且会显示出来相应的返回数据，与相应的请求相关内容等。

效果如图所示。

这样的话，看接口返回的数据就会比较方便一些。

具体的使用的流程：

1.下载工具 

2.在自己的rn项目中添加依赖：npm i --save-dev reactotron-react-native

3.创建ReactotronConfig.js 文件 

import Reactotron from 'reactotron-react-native'
Reactotron
 .configure() // controls connection & communication settings
 .useReactNative() // add all built-in react native plugins
 .connect() // let's connect!

4.在启动文件中，复制此代码：

//注意此处文件路径改为自己项目中的相对路径
if(__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}

如图所示：

最后还需要在运行之前，配置一下端口：尤其是真机配置的情况下，需要运行下面的命令，才能在插件中显示相应的接口数据。

adb reverse tcp:9090 tcp:9090