如何调试React Native?

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

当前回答

非常简单，只有两个命令

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

其他回答

在React-Native中，调试要容易得多。

在IOS中使用调试

CMD + d ctrl + cmd + z(用于模拟器)

在android中调试

用触摸摇动设备(确保你的开发者选项是启用的)

如果你想在默认情况下打开调试:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

要让它在Android上工作:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

参考:启动一个React Native应用程序，默认启用“调试JS远程”

假设你想在Android模拟器上显示这个菜单

然后，尝试⌘+m在Mac上的Android模拟器上弹出这个开发设置对话框。如果没有显示，那么转到AVD >(点击笔编辑模拟器配置)>高级设置>检查启用键盘输入框。然后重试⌘+m。如果它没有显示静止，那么去运行模拟器设置和发送键盘快捷键到组合框/下拉菜单，然后选择模拟器控件(默认)选项。

然后重试⌘+m。我希望这对你有帮助，它对我有用。

React本机调试器。它帮我解决了90%的问题

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

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

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

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

总之，把这些都放在一个地方真是太棒了!如果你不需要其中一个，你可以打开/关闭它。获得React本机调试器并享受生活。

推荐文章