当应用程序在应用模拟器中运行时,如何用React Native调试他们的React代码?


当前回答

使用可视化代码工作室调试react原生android和ios应用程序的最佳方法

步骤1。

安装React Native -完整的扩展包

步骤2。

使用USB调试模式连接移动设备或从android工作室打开模拟器。

步骤3。

在可视代码工作室的左侧菜单中单击调试选项 点击添加配置,选择React Native,然后创建launch.json

步骤4。

打开dev选项在手机上的长后按或摇手机和启用调试js远程

第5步。

最后一步点击播放按钮,选择调试android或调试ios

更多信息请参考这个链接

https://medium.com/@tunvirrahmantusher/android-debug-with-vscode-for-react-native-96f54d73462a

其他回答

在React-Native中,调试要容易得多。

在IOS中使用调试

CMD + d ctrl + cmd + z(用于模拟器)

在android中调试

用触摸摇动设备(确保你的开发者选项是启用的)

对于Android应用程序,如果你正在使用Genymotion,你可以通过按CMD + m来切换菜单,但你可能必须在菜单中启用它。

取消小部件 通过CMD + m单击debug在chrome中启用它

在模拟器- react-native Run -ios中运行你的应用程序 按ctrl + d,然后点击Debug JS remote

网页应该在http://localhost:8081/debugger-ui打开,如果没有输入URL,在Chrome中进入这个链接 右键点击页面,点击检查,它应该打开chrome开发工具

转到顶部菜单中的源代码,在右侧的文件资源管理器中找到你的js类文件 您可以将断点放到视图中,并在其中调试代码,如图所示。

对我来说,在React-Native上调试的最好方法是使用“Reactotron”。

安装Reactotron,然后将这些添加到你的package.json:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

现在,只需要登录您的代码。 例如:console.tron.log(调试)

在Windows中,使用android模拟器,你可以执行以下步骤:

模拟器运行后,应用程序在它上面,按下菜单按钮,然后选择“调试JS远程”或“调试在Chrome中”(这取决于模拟器使用)。你可以看到下一个图像作为参考:模拟器的步骤图像 一个新的Chrome标签将出现。你必须按Ctrl + J来显示开发人员工具,并开始跟踪调试步骤。请看这张图片作为参考

此外,您应该使用console.log()特性来使调试过程更具描述性。