react-native调试攻略 -- Android Studio

时间:2024-05-23 11:44:58

笔者使用的是Android Studio的模拟器,以下是我所知的模拟器和真机的调试方式
从网页转到app不适应的一点就是网页经常控制台调试,而用了几天react-native感觉哪总说不上来的不舒服,后来对比发现我常用的调试用不了了,这就很难受,后来在网上看了很多的相关文章,在总结自己的使用经验有了以下的调试经验
开发者菜单
方法1
在模拟器上按CTRL + M就可以打开开发者菜单
方法2
在命令行启动react-native项目时下面会有这么两句,意思在图上有标注
react-native调试攻略 -- Android Studio
在命令行输入d也可以打开模拟器的开发者菜单
3,有的旧版本模拟器带一个功能键,按下功能键就可以打开开发者菜单,比如这款模拟器
react-native调试攻略 -- Android Studio
4,真机
真机的话可以晃动手机打开开发者菜单
另外使用真机调试的时候正常运行是是不成功的,因为电脑模拟器会自动和电脑连接,手机要求是和电脑在同一局域网下,可以当成同一wifi下,然后查看电脑的ip地址,打开真机的开发者菜单按照如下操作即可
react-native调试攻略 -- Android Studio
控制台打印(两种方法)
1,使用官方工具 react-native-debugger
react-native调试攻略 -- Android Studio
我看一些博客都说要打开手的开发者模式下的远程js调试,可是细心的我怎么也找不到这个功能,后来发现直接打开工具然后在模拟器上按照以上方法打开开发者菜单,点击Debug模拟器就会自动和debugger工具连接,控制台就可以打印了
2,使用chrome控制台
在不打开debugger工具的情况下点击开发者菜单的debugger就会打开chrome浏览器,有如下姐界面即为成功
react-native调试攻略 -- Android Studio
这两种方式的对比:
debugger: 需要下载????
chrome控制台不需要
debugger:更加详细,跟react的开发工具类似,功能齐全,可以看到props,state,各组件等详细信息,chrome则没有,遇到小的demo,感觉chrome控制台就够用了
react-native调试攻略 -- Android Studio
好了,以上就是我知道的集中调试相关的方式,如果哪位朋友还知道别的方式,还请留言告知,让进坑的菜鸟尽快怕粗来????