ReactNative 调试

目前是webstorm调试，Vscode搞了俩天没成功，(建议用webstorm，使用和AndroidStudio 类似，快捷键也类似)

准备

• ReactNative 环境搭建 (官方文档)
• webstorm下载 官方文档

导入项目

导入项目后，如果首次导入，那么和AndroidStudio一样，无法自动将项目起来。（ps：我跑的是Android项目），这个地方有 android的标志是因为我已经配置好了。

image.png
如果显示Add Configurations，需要去配置你的ReactNative项目，在package.json文件中，在scripts标签下添加设置启动的命令行工具。
image.png
最后的--flavor=Flavors_testDebug根据Android项目中的配置，看你启动哪个渠道的生产还是测试环境的包,
如果没有设置渠道，--flavor=Flavors_testDebug可以去掉。
image.png ，
如果命令行启动配置好了，就可以启动项目，不过是以Android的启动的。
*点击右边的绿色箭头
image.png
启动完成之后，如果ReactNative项目无语法错误，那么你将在手机或者模拟器中跑起来。并且在图中红框中自动添加一个Android的启动项目，下次可以直接点击旁边的按钮就可以了。
image.png

React Native的调试过程

同样是点击Add Configurations标记

image.png
在点击左上角的“+”按钮，选择React Native符号
image.png
生成一个Configurations页面
image.png

• name 为启动命名
• React Native Package:选择你自己本地的 RectNative命令行工具
  点击OK即可保存配置，现在的项目是以React Native 运行点击后面的绿色昆虫
  image.png
  项目将以Debug的形式跑起来，在需要断点位置打上断点。
  image.png
  如果页面错过断点，手机中如果不是断点模式，改为断点模式，重新 Reload下项目即可运行起来。
  image.png