目的
之前一直用chrome调试，一个是不习惯前端调试方法，毕竟是android 出身嘛还是习惯IDE调试，还有就是源码位置总要滑到底才能找到，很麻烦。突然发现ReactNative也能用IDE调试真是喜出望外啊，将配置和调试方法记录一下。
IDE设置
首先配置项，点击Edit Configurations
配置.png
然后配置react native启动项
1.gif
其中有几点说明一下
-
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代码就可以了
3.png
调试
配置完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
