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


当前回答

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

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

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

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

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

其他回答

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

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远程”

我使用这个库来调试react-native项目

https://github.com/jhen0409/react-native-debugger 它包括

包括React -devtools-core中的React Inspector。 包括回家的 DevTools,用redux-devtools-extension做了相同的API。

或者你可以用

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

你可以从brew安装React本机调试器。它比chrome中的调试器使用起来更舒服

使用Flipper或retotron。每一种都有自己的好处,没有一种要求您启用调试模式,所以您的环境不会变慢!

在react-native的新版本中,您可以使用react-native log-android或react-native log-android查看应用程序在dev模式下的日志。