React-Native调试工具

最新推荐文章于 2025-06-02 09:15:55 发布

贺贺V5

最新推荐文章于 2025-06-02 09:15:55 发布

阅读量942

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： react-native

本文链接：https://blog.youkuaiyun.com/u010130282/article/details/78659412

react-native 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用Reactotron工具来调试Redux应用的方法，并详细介绍了如何配置Reactotron以跟踪action和HTTP请求，同时提供了查看React Native应用DOM结构的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Redux的调试，除了最基本的打断点进去调试之外，还有一个好用的调试工具reactotron，它能够帮你清楚的记录你所发出的action，以及http请求，可以帮你更好的分析redux的结构。

下面说一下简单的配置

package.json中的添加

devDependencies: {
  "reactotron-apisauce": "^1.11.1",
    "reactotron-react-native": "^1.11.1",
    "reactotron-redux": "^1.11.2",
    "reactotron-redux-saga": "^1.11.1"
}

修改store.js文件

import Reactotron from 'reactotron-react-native';
import { composeWithDevTools } from 'redux-devtools-extension';
import '../ReactotronConfig';
  const sagaMiddleware = createSagaMiddleware({
     sagaMonitor: Reactotron.createSagaMonitor(),
   });
 const store = Reactotron.createStore(
     xxReducer,
     composeWithDevTools(middleware),
  );

ReactotronConfig.js文件

import Reactotron, { networking } from 'reactotron-react-native';
import { reactotronRedux as reduxPlugin } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';

/* eslint no-console:0 */
console.disableYellowBox = true;

Reactotron.configure({ name: 'ReactNativeSinooa' }); // controls connection & communication settings
Reactotron.useReactNative(); // add all built-in react native plugins
Reactotron.use(reduxPlugin());
Reactotron.use(sagaPlugin());
Reactotron.use(networking());
// if we're running in DEV mode, then let's connect!
/* eslint no-undef:0 */
if (__DEV__) {
  Reactotron.connect();
  Reactotron.clear();
}

DOM结构查看

可以查看dom结构的react devtools。

只需要在index.ios.js和index.android.js文件中引入import 'react-devtools';即可。

import 'react-devtools'; // 引入，需要执行`yarn add react-devtools `
import { AppRegistry } from 'react-native';
import APP from './src/APP';

AppRegistry.registerComponent('workflow', () => APP);

然后在

//package.json中添加` "devtools": "react-devtools"`
类似下面这样
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "devtools": "react-devtools"
  },

然后在命令行执行yarn run devtools即可。

配合ios模拟器可以方便进行查找dom元素。

QQ20170915-140436@2x.png