By

欢迎转载，请支持原创，保留原文链接:blog.ilibrary.me

今天想介绍一下React Native调试神器, React Native Debugger, 它集成了好几开源工具，包括React DevTools、react-devtools-core、Redux DevTools和Remote Redux DevTools

集成步骤

React Native Debugger本身不提供客户端sdk，它通过集成上面提到的几个debugger工具的调试端代码，达到支持多种调试功能的目的。你需要自己手动去分别集成客户端代码。

  1. 集成redux-devtools-extension 到客户端。
import { composeWithDevTools } from 'redux-devtools-extension';
const middleware = composeWithDevTools({})(applyMiddleware(thunk, logger));
  1. 打开React Native Debugger，注意关闭任何打开着的网页debugger-ui页面, 运行app，打开远程js调试。
  2. 然后你就可以看到类似下面的界面了

React Native Debugger

如果有问题，建议参考React Native Debugger的样例工程代码

功能

  1. 查看所有的action、state记录
  2. 回放，也就是time traverse
  3. 撤销、应用某个action
  4. 查看app ui hierachy
  5. 导入导出action, store记录

问题

使用的时候遇到以下问题。

  1. 这个工具不能编辑action然后dispatch。可能是编辑器有问题。
  2. 无法查看$r变量, 这个变量是啥？