ReactNative入门-用webstorm调试

目的

之前一直用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

参考资料

https://youtrack.jetbrains.com/issue/WEB-27303