专栏首页贺贺的前端工程师之路React-Native调试工具Redux调试DOM结构查看

React-Native调试工具Redux调试DOM结构查看

Redux调试

1. reactotron

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();
}

2. redux-devtools-extension

redux-devtools-extension这个调试工具我用的比较少些,不过也是查看redux很好用的工具。

这个主要是可以在chrome浏览器的控制台中来查看。

redux-devtools

install

可以直接从 Chrome Web Store来安装,这样方便许多。

3. remote-redux-devtools

这个我用的比较少,就不做详细介绍,可以去官网细看。

DOM结构查看

可以查看dom结构的react devtools

只需要在index.ios.jsindex.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

写在后面

GitHub上集大家之力搞了一个前端面试题的项目,里面都是大家面试时所遇到的题以及一些学习资料,有兴趣的话可以关注一下。如果你也有兴趣加入我们的话,请在项目中留言。项目同时也可以在gitbook上查看。

InterviewLibrary-GitHub InterviewLibrary-gitbook

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Docker 入门(2019-07-31)

    Docker 是一个允许用户“在任何地方构建、分发及运行任何应用”的平台(引擎)。

    贺贺V5
  • Swagger规范 之 出错点

    第一天使用的时候我就发现了它确实易懂,直接写就OK。但是在编写API文档的时候,还是遇到了几个不大不小的坑,记录下来,分享一下,其实是深怕自己过几天就忘了!O(...

    贺贺V5
  • 2019-01-18 数据库入门

    数据库入门一、简介1. 数据2. 数据库(DB)3. 数据库管理系统(DBMS)4. 数据库系统(DBS)二、关系型数据库和非关系型数据库1. 常用数据库2. ...

    贺贺V5
  • ZCU106使用VCU TRD的MIPI的例子

    在ZCU106上,使用VCU TRD的MIPI的例子,可以从MIPI摄像头采取图像数据,并使用GStreamer推送到HDMI显示器上。

    hankfu
  • 设计模式--适配器模式的思考

    个人认为适配器模式是一种加中间层来解决问题的思想,为的是减少开发工作量,提高代码复用率.另外在对于第三方的服务中使用适配器层则可以很好的把自己系统与第三方依赖解...

    屈定
  • 一日一技:如何为 Pyppeteer 设置带有权限验证的代理?

    在我们使用 Pyppeteer 的时候,可能会需要设置代理,此时,你需要使用如下方法:

    青南
  • 深入理解JavaScript系列(41):设计模式之模板方法

    模板方法(TemplateMethod)定义了一个操作中的算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特...

    用户4962466
  • [Spring cloud 一步步实现广告系统] 19. 监控Hystrix Dashboard

    在之前的18次文章中,我们实现了广告系统的广告投放,广告检索业务功能,中间使用到了 服务发现Eureka,服务调用Feign,网关路由Zuul以及错误熔断Hys...

    Isaac Zhang
  • 中文词嵌入 | PaperReader

    感谢阅读「美图数据技术团队」的第 20 篇原创文章,关注我们持续获取美图最新数据技术动态。

    美图数据技术团队
  • BugkuCTF web基础$_GET

    前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文...

    Angel_Kitty

扫码关注云+社区

领取腾讯云代金券