工欲善其事，必先利其器之—react-native-debugger调试react native应用

调试react应用通常利用chrome的inspector的功能和两个最常用的扩展
1、React Developer Tools （主要用于debug组件结构)
2、Redux DevTools （主要用于debug redux store的数据）


对于react native应用，我们一般就使用react-native-debugger了，它是一个独立的应用，需要单独安装，在mac下可以用如下命令安装或到官网下载安装包

# mac 终端下使用如下命令安装， cask参数是针对安装有GUI界面的APP
brew install --cask react-native-debugger

RN工程添加依赖

RN工程中需要安装如下两个包

yarn add redux-devtools-extension remote-redux-devtools

RN工程创建store的配置

# 引入 composeWithDevTools方法，利用方法生成composeEnhancers并创建store实例
import {composeWithDevTools} from 'redux-devtools-extension';

通常的常规用法

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

使用 Enhancers的情况

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

具体的场景参考官方文档的指引 https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux

RN调试

1、先启动react-native-debugger应用
2、然后按正常步骤开启RN应用的debug模式
3、最后没有任何异常的话，就在react-native-debugger界面查看组件结构，以及调试JS代码，收集与分析store的数据变化了

查看network

默认的react-native-debugger的network监视，是看不到react native 应用的网络请求的，需要更改下react-native-debugger的配置

打开文件后，修改defaultNetworkInspect的值为true，然后重启后生效！enjoy!

查看AsyncStorage的数据

直接在consloe输入如下命令，或直接查看当前storage的数据库的内容，不用打开AS去看应用的sqlite中的数据

console.log(showAsyncStorageContentInDev())

注意：showAsyncStorageContentInDev()的信息为两部份，上面部份是key,value的表格预览效果，value的值比较长的时候是没有显示全的；表格下面是一个Object对象，才是实际上key,value的真实值，即要copy value的值时，需要展开Object对象的
文章来源地址https://www.toymoban.com/news/detail-576172.html

参考文档

• https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux
• https://github.com/jhen0409/react-native-debugger
• How to use Redux devtools with React Native

到了这里，关于工欲善其事，必先利其器之—react-native-debugger调试react native应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！