工欲善其事,必先利其器之—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的数据变化了

参考文档

相关推荐
西陵6 分钟前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
笑鸿的学习笔记22 分钟前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
萌萌哒草头将军2 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
gnip2 小时前
http缓存
前端·javascript
JohnYan3 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
陈陈爱java4 小时前
Spring八股文
开发语言·javascript·数据库
小鱼儿亮亮4 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界4 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
小鱼儿亮亮4 小时前
使用Redux的combineReducers对数据拆分
前端·react.js
烛阴4 小时前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript