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