10
React Native调试神器-React Native Debugger
source link: http://blog.ilibrary.me/2017/03/13/react-native%E8%B0%83%E8%AF%95%E7%A5%9E%E5%99%A8-react-native-debugger
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native调试神器-React Native Debugger
欢迎转载，请支持原创，保留原文链接:blog.ilibrary.me
今天想介绍一下React Native调试神器, React Native Debugger, 它集成了好几开源工具，包括React DevTools、react-devtools-core、Redux DevTools和Remote Redux DevTools
React Native Debugger本身不提供客户端sdk，它通过集成上面提到的几个debugger工具的调试端代码，达到支持多种调试功能的目的。你需要自己手动去分别集成客户端代码。
- 集成redux-devtools-extension 到客户端。
import { composeWithDevTools } from 'redux-devtools-extension';
const middleware = composeWithDevTools({})(applyMiddleware(thunk, logger));
- 打开React Native Debugger，注意关闭任何打开着的网页debugger-ui页面, 运行app，打开远程js调试。
- 然后你就可以看到类似下面的界面了
React Native Debugger
如果有问题，建议参考React Native Debugger的样例工程代码
- 查看所有的action、state记录
- 回放，也就是time traverse
- 撤销、应用某个action
- 查看app ui hierachy
- 导入导出action, store记录
使用的时候遇到以下问题。
- 这个工具不能编辑action然后dispatch。可能是编辑器有问题。
- 无法查看$r变量, 这个变量是啥？
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK