调试react应用通常利用chrome的inspector的功能和两个最常用的扩展
1、React Developer Tools （主要用于debug组件结构)
2、Redux DevTools （主要用于debug redux store的数据）
对于react native应用，我们一般就使用react-native-debugger了，它是一个独立的应用，需要单独安装，在mac下可以用如下命令安装或到官网下载安装包
bash
# mac 终端下使用如下命令安装， cask参数是针对安装有GUI界面的APP
brew install --cask react-native-debuggerRN工程添加依赖
RN工程中需要安装如下两个包
yarn add redux-devtools-extension remote-redux-devtools
RN工程创建store的配置
# 引入 composeWithDevTools方法，利用方法生成composeEnhancers并创建store实例
import {composeWithDevTools} from 'redux-devtools-extension';
通常的常规用法
javascript
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));使用 Enhancers的情况
javascript
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的数据变化了