webstorm断点调试ReactNative

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

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

作者：阿_贵
链接：https://www.jianshu.com/p/3745e645526e
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。