目前是webstorm调试，Vscode搞了俩天没成功，(建议用webstorm，使用和AndroidStudio 类似，快捷键也类似)
准备
导入项目
导入项目后，如果首次导入，那么和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
网友评论