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


当前回答

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

这是弹出的屏幕:

详情请点击这里。

其他回答

非常简单,只有两个命令

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

其实很简单。只需按cmd D(如果在mac上),模拟器将创建一个弹出菜单。从那里只需点击“调试JS远程”或类似的东西。注意,在执行与某些包相关的代码时运行调试器会给人们带来问题。我有一个问题与反应本机映射和调试器。但这是固定的。不过,在大多数情况下,你应该没问题。

如果你正在使用Redux,我强烈推荐React Native Debugger。它包括Chrome开发工具,但也有Redux开发工具和React开发工具。

Redux Devtools:这允许你查看你的操作,并在它们之间来回切换。它还允许您查看redux存储,并具有自动区分每个操作的先前状态和更新状态的功能,因此当您在一系列操作中来回执行时,您可以看到这一点。

React Devtools:这允许你检查某个组件,即它的所有道具以及它的组件状态。如果你有一个组件状态的布尔值,它让你点击它来切换它,看看当它改变时你的应用程序是如何反应的。很棒的特性。

Chrome Devtools允许你看到你所有的控制台输出,使用断点,暂停调试器;等。标准调试功能。如果你右键单击Redux Devtools中列出的操作区域,并选择“允许网络检查”,你可以在Chrome Devtools的网络选项卡中检查你的API调用。

总之,把这些都放在一个地方真是太棒了!如果你不需要其中一个,你可以打开/关闭它。获得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-native

例子:

debugger; //breaks execution

你的chrome开发工具必须打开这工作