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 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

社区网站系统 jsGen

jsGen是用纯JavaScript编写的新一代开源社区网站系统,主要用于搭建SNS类型的专业社区,对客户端AngularJS应用稍作修改也可变成多用户博客系统...

25850
来自专栏沈唁志

在WordPress中优化谷歌(AdSense)广告联盟

很多时候我们需要将某些内容在指定的页面中显示,比如将谷歌自动广告设置为不在首页显示,这些都可以通过修改代码来达到效果

14430
来自专栏Youngxj

emlog每日一键打卡(踩/赞三合一)插件1.2

25450
来自专栏FreeBuf

和黑客玩场游戏:利用CryptoWall跟踪器搞砸黑客小心思

前言: 在一次TED演讲上有个人演示了一个和419骗子交互的游戏——当你回复垃圾邮件后会发生什么,于是我也有了和黑客打游击战的想法。 于是2月10日我将所有关于...

263110
来自专栏我有一个梦想

Python 项目实践一(外星人入侵)第一篇

python断断续续的学了一段实践,基础课程终于看完了,现在跟着做三个小项目,第一个是外星人入侵的小游戏: 一 Pygame pygame 是一组功能强大而有趣...

479100
来自专栏云计算认知升级

小程序·云开发 项目开发经验分享

近期,小程序开放了新的能力——「小程序·云开发」,帮助开发者快速构建微信小程序的后端服务。我作为一名微信小程序的开发者,也在第一时间尝试了小程序云开发,并将我自...

4K140
来自专栏程序员互动联盟

编程高手为啥都喜欢耍脚本?

脚本编程几乎在每一个平台上都存在,这是因为利用脚本常常会简化、加快很多批量处理的工作,它能实现很多传统编程语言的功能,但是对编写者却不需要关心什么编译器、解释器...

35350
来自专栏刘望舒

知乎 Android 客户端组件化实践

知乎 Android 客户端最早使用的是最常见的单工程 MVC 架构,所有业务逻辑都放在了主工程 Module 里,网络层和一些公共代码分别被抽成了一个 Mod...

48540
来自专栏Python爬虫实战

Python爬虫:十几行代码下载王者荣耀所有皮肤

之前接触过爬虫还是几年前爬取豆瓣电台的歌曲,那时候用的C++,json解析还要用第三方库,总之很麻烦。最近接触到了python,深深的感觉这门语言真好。

12120
来自专栏WeTest质量开放平台团队的专栏

http性能测试点滴

在服务上线之前,性能测试必不可少。本文主要介绍性能测试的流程,需要关注的指标,性能测试工具apache bench的使用,以及常见的坑。

20930

扫码关注云+社区

领取腾讯云代金券