目的
之前一直用chrome调试,一个是不习惯前端调试方法,毕竟是android 出身嘛还是习惯IDE调试,还有就是源码位置总要滑到底才能找到,很麻烦。突然发现ReactNative也能用IDE调试真是喜出望外啊,将配置和调试方法记录一下。
IDE设置
首先配置项,点击Edit Configurations
然后配置react native
启动项
其中有几点说明一下
-
name
可以随便填可以代表应用名 -
React Native package
这项需要选择RN的命令行工具一般在~\AppData\Roaming\npm\node_modules\react-native-cli
这个目录 - 如果没安装命令行可以执行
npm install -g yarn react-native-cli
进行安装 -
Target platform
选择目标设备 -
Browser
选项按需选择,一般开发只保留一个chrome就好了
运行效果是这样的
2.gif
运行中弹出了指定的浏览器,如果想静默运行在Browser
选项中添加-headless --disable-gpu
代码就可以了
调试
配置完IDE启动项后,就可以愉快的debug玩耍了,这里用法和studio一样很方便android小伙伴快速上手,debugger面板左侧显示当前线程运行的方法,右侧显示的是当前变量,有本地变量和全局变量很方便啊。
4.png
菜单项
5.png打开菜单项有三种方式
- 在控制台输入
adb shell input keyevent 82
- 在模拟器上用快捷键
ctrl+M
,这个比第一种好用 - 在手机上摇一摇(需要用力。。)
几项常用的说明一下
- Reload 重新加载 这个和在模拟器上双击R的效果是一样的
- Remote JS Debugging 就是远程调试了,用启动项运行起来是默认开启状态
- Live Reload是全局刷新,写完代码保存一下就会自动更新
- Hot Reloading是局部刷新,写完代码保存一下就会自动更新
- Toggle Inspector 审查元素用的小工具
- perf 暂时不清楚哈,有知道的请留言
- Inspect 可以快速看到布局相关元素
6.png -
Network可以清晰地看到网络请求相关所有信息,这个太实用了
7.png -
Touchables 可以看到可点击区域
8.png
网友评论
1169393184 qq
可能有些绕,不过确实是有这种需求的.