React Native Debugger工具

前言

• React-Native-Debugger 是在官方 Remote Debugger 调试工具的基础上，集成了 React Inspector 以及 Redux DevTools 的调试工具。
• 可以用来代替之前一直使用的 Chrome 远程调试，比较方便地查看元素布局，和Redux管理的状态
• 具体介绍看 GitHub: https://github.com/jhen0409/react-native-debugger

redux devtools

• 可在调试工具窗口单击右键，点击toggle XXX来选择关闭或打开某项窗口，比如：react devtools、redux devtools。
• Redux devtools打开时位于窗口左上方，分为左右两部分。
• 左边可以观察actions执行的历史，回溯到某个action、回放action执行过程等等。
• 右边可以用三种方式:tree、chart、raw之一来展示Action或者state的结构，或者通过diff来观察对比执行action后的pre state和next state。

• 还可以将状态过程保存到本地，或上传某个记录文件(我曹，查bug时利器)

  
  
  image.png

react devtools 和 element inspector

• react devtools位于窗口左下，显示页面组件结构，以及每个组件的prop、state、样式等属性、还有对应代码所在位置(双击即可打开对应的js文件)。
  
  image.png
• element inspector位于模拟器/真机的界面上，选择Inspect选项后，即可在界面上点击任意元素，然后在react devtools定位到该元素，同时不会触发onPress等点击事件。选择Touchables选项后，可在界面上显示出可以触发点击事件的元素。
  
  image.png

developer tools

• developer tools就相当于react-native自带的debugger工具，可在console里查看控制台信息。