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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容