每个项目产品都要加埋点,加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么?来试试这520web工具, 高效加埋点,目前我们公司100号前端都在用,因为很好用,所以很自然普及开来了,推荐给大家吧
自己开发所以免费,埋点越多越能节约时间,点两下埋点就加上了,还不会犯错,里面有使用视频,反正免费 😄
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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。