工欲善其事,必先利其器之—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下可以用如下命令安装或到官网下载安装包

bash 复制代码
# 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';

通常的常规用法

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的数据变化了

参考文档

相关推荐
uhakadotcom几秒前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
weixin_457885826 分钟前
JavaScript智能对话机器人——企业知识库自动化
开发语言·javascript·自动化
慕斯策划一场流浪33 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
梅子酱~1 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
你的人类朋友1 小时前
JS严格模式,启动!
javascript·后端·node.js
Carlos_sam2 小时前
OpenLayers:如何控制Overlay的层级?
前端·javascript
z_mazin2 小时前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
绿草在线2 小时前
Mock.js虚拟接口
开发语言·javascript·ecmascript
时光追逐者3 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor