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

参考文档

相关推荐
gnip12 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼14 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
木西17 小时前
React Native DApp 开发全栈实战·从 0 到 1 系列(兑换-前端部分)
react native·web3·solidity
hj5914_前端新手18 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法18 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku18 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu18 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu18 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu18 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu18 小时前
【js篇】call() 与 apply()深度对比
前端·javascript