调试React原生应用程序

要调试react应用程序的javascript代码，请执行以下操作:

在iOS模拟器中运行应用程序。 按Command + D，打开一个网页http://localhost:8081/debugger-ui。(Chrome只现在)或使用摇手势 为更好的调试体验启用暂停捕获异常。 按命令+选项+ I打开Chrome开发工具，或通过视图->开发人员->开发人员工具打开。 现在您应该能够像往常一样进行调试了。

可选

为谷歌Chrome安装React开发人员工具扩展。当开发人员工具打开时，如果你选择React选项卡，这将允许你在视图层次结构中导航。

生活重新加载

要激活Live Reload，请执行以下操作:

在iOS模拟器中运行应用程序。 按Control + Command + Z键。 您现在将看到启用/禁用Live Reload，重新加载和启用/禁用调试选项。

在文件路径中设置空格会阻止Cmd+D的工作。我把我的项目移动到一个没有空间的位置，我终于让Chrome调试器工作了。看起来像个bug。

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

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

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

奇怪的是，⌘+ D对我不起作用。在iOS模拟器中按ctrl + cmd⌘+ Z确实为我打开了调试浏览器窗口。

这是弹出的屏幕:

详情请点击这里。

对我来说，在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(调试)

如果你在连接到笔记本电脑的真实设备上运行应用程序，你可以使用react-native log-ios或react-native log-android通过终端调试它(它也适用于模拟器)