React Native Debugger

React Native Debugger 是RN项目的调试利器，集成了多个调试工具。

(1) 官方提供的调试工具：通过 console 大法或 debugger 来进行调试；

(2) react devtools：react 官方提供调试工具，但是不支持调试 RN；

(3) redux devtools：redux 调试工具，能监听 redux 中任何时候的 state；

(4) xcode 或 Android stdiuo： 不支持 debug js code

下面看一下这个工具的使用

先看一下各个面板的功能：

image.png

redux devtools调试面板

image.png

react devtools调试面板

image.png

Debugger 调试面板

image.png

如果端口8081被占用，可切换端口调试
设置端口看下图

image.png

输入端口号

image.png

总结：

1.React Native Debugger 集成了 react-devtools、redux-devtools、debugger等工具

2.在react-devtools调试面板中查看组件props、state、style，可修改style

3.在redux-devtools调试面板中查看状态树、dispatch过的Action及状态变化

4.能开启多个debugger监听多个端口

5.能监听网络请求

6.安装 For macOS
brew update && brew cask install react-native-debugger