如何调试React Native?

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

当前回答

Mac： Cmd+M

Windows和Linux: Ctrl+M

在模拟器中使用适当的热键。它会弹出Chrome浏览器，从那里你可以使用开发人员工具。

编辑:

现在在帮助文档中有链接。

其他回答

我使用的一种技术非常类似于Android中的调试策略，即在所有.js文件中包含一个名为TAG的全局变量。

const TAG = 'APP_NAME+SCREEN_NAME';

然后在需要的地方，我将这样做:console.log(TAG + 'ACTION');

通过这种方式，我可以跟踪操作并查看日志语句的来源。

使用可视化代码工作室调试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

非常简单，只有两个命令

For IOS $ react-native log-ios
For Android $ react-native log-android

Mac： Cmd+M

Windows和Linux: Ctrl+M

在模拟器中使用适当的热键。它会弹出Chrome浏览器，从那里你可以使用开发人员工具。

编辑:

现在在帮助文档中有链接。

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

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

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

推荐文章