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


当前回答

您可以使用expo进行调试:https://expo.io/

Expo让web开发者能够构建真正的本地应用程序,可以在这两个平台上运行 iOS和Android只需要用JavaScript写一次。它是开放 源代码,免费并使用React Native。

这是一个很棒的工具,你可以在React Europe conf上观看这个研讨会:

https://www.youtube.com/watch?v=HygXkQDMSGU&t=6675s

其他回答

要调试你的react原生应用程序,只需到以下地址:

localhost: 8081 / debugger-ui 在你的默认浏览器(chrome)和打开开发者工具来调试你的react原生应用程序

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

这是弹出的屏幕:

详情请点击这里。

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

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

调试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,重新加载和启用/禁用调试选项。

非常简单,只有两个命令

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