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


当前回答

如果你想了解检查网络流量和理解原生UI视图层次结构。通过其可扩展的插件API, React Native Update版本为调试移动应用程序提供了开发人员工具。

Flipper是一个调试移动应用程序的很棒的开发工具。该工具随react-native 62一起发布

其他回答

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

这是弹出的屏幕:

详情请点击这里。

如果你正在使用Microsoft Visual Code,那么安装React Native Tools扩展。然后,只需单击所需的行号就可以添加断点。 按照以下步骤来安装和调试应用程序:

不要忘记启用调试JS远程模拟器,如果你使用它。

如果你想了解检查网络流量和理解原生UI视图层次结构。通过其可扩展的插件API, React Native Update版本为调试移动应用程序提供了开发人员工具。

Flipper是一个调试移动应用程序的很棒的开发工具。该工具随react-native 62一起发布

还有一个非常好的调试器Reactotron。 https://github.com/infinitered/reactotron

您不必在调试模式下查看一些数据值,而且有很多选项。

去看看真的很有用。;)

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