ReactNative入门-用webstorm调试

2018-01-12 本文已影响643人 LaxusJ

目的

之前一直用chrome调试，一个是不习惯前端调试方法，毕竟是android 出身嘛还是习惯IDE调试，还有就是源码位置总要滑到底才能找到，很麻烦。突然发现ReactNative也能用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

打开菜单项有三种方式

几项常用的说明一下