ReactNative 调试

目前是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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容