webstorm断点调试ReactNative

1.  用 Chrome 断点调试RN

不用安装 React Develper Tools 谷歌浏览器插件，也能断点调试

摇晃手机，在菜单中选择 Debug JS Remotely ，自动调用 Chrome

inspect  -->  Sources  --> 找到 debuggerWorker.js ,点开看到源代码，就能断点调试了

2.  用webstorm断点调试  expo  

https://www.jetbrains.com/help/webstorm/react-native.html

先用 expo 打开工程，运行app在android或ios

配置webstorm，注意要去掉这里的 Start React Native Bundler，bundler由expo运行

点击webstorm小虫子监听，摇晃手机开发者菜单，点击debug，就可以调试了

3.  用webstorm断点调试 react-native ，非 expo

用 react-native run-android 运行app

不用 webstorm 安装app，所以不选 Build and launch application

Bundler 已经运行，所以删除 Start React Native Bundler 

（1）先在命令行运行：react-native run-android

（2）然后点击 webstorm 工具栏上的 debug，弹出 Chrome 窗口 React Native Debugger

（3）摇晃手机，选中 Debug JS Remotely

（4）摇晃手机，选中 Reload

在 webstorm 内，经常不停在断点处，在 Chrome 内设置断点，webstorm 就能停在断点处，大坑。

4.  看组件层次的调试器，React Developer Tools

https://facebook.github.io/react-native/docs/debugging.html

安装  

npm install -g react-devtools

运行

react-devtools

摇晃手机，在菜单中选择 Toggle Inspector