如何在React Native中记录日志？

如何在React Native中记录变量，例如console.log在为Web开发时使用？

console.log 作品。

默认情况下，在iOS上，它记录到Xcode内的调试窗格中。

在IOS模拟器中，按（⌘+ D），然后按 Remote JS Debugging。这将在本地主机上打开资源http：// localhost：8081 / debugger-ui。从那里使用Chrome Developer工具javascript控制台查看console.log

使用console.log，console.warn等等。

从React Native 0.29开始，您只需运行以下命令即可在控制台中查看日志：

$ react-native log-ios
$ react-native log-android

在React Native 0.29之前，在控制台中运行以下命令：

adb logcat *:S ReactNative:V ReactNativeJS:V

发布React Native 0.29后，运行：

react-native log-ios

要么

react-native log-android

正如马丁在另一个答案中所说。

这将显示所有console.log（），错误，注释等，并导致速度减慢为零。

采用 console.debug("text");

您将在终端内看到日志。

脚步：

• 运行应用程序：

react-native run-ios        # For iOS
react-native run-android    # For Android

• 运行记录器：

react-native log-ios        # For iOS
react-native log-android    # For Android

Visual Studio Code有一个不错的调试控制台，可以显示您的console.log。

VS Code通常是React Native友好的。

这是Chrome开发者工具是你的朋友。

请按照以下步骤操作，进入Chrome开发者工具，在这里您可以查看自己的对console.log帐单。

脚步

1. 如果尚未安装Google Chrome，
2. 使用react-native run-android或运行应用react-native run-ios
3. 打开开发者菜单
   • Mac：⌘+D 适用于iOS或⌘MAndroid iOS
   • Windows / Linux：摇动Android手机
4. 选择 Debug JS Remotely
5. 这应该在Chrome中启动调试器
6. 在Chrome中：Tools -> More Tools -> Developer Options并确保您位于console选项卡上

现在，无论何时console.log执行一条语句，它都应该出现在Chrome开发工具中。官方文档在这里。

开发React Native应用程序时可以使用以下3种方法进行调试：

1. console.log()：在控制台中显示
2. console.warn()：显示在应用程序的黄色框底部
3. alert()：像在网络上一样显示为提示

我更推荐您使用React Native Debugger。您可以使用此命令下载并安装它。

brew update && brew cask install react-native-debugger

要么

只需检查下面的链接。

https://github.com/jhen0409/react-native-debugger

快乐黑客！

我遇到了同样的问题：控制台消息未出现在XCode的调试区域中。在我的应用程序中，我执行了cmd-d来打开调试菜单，并记得我已将“在Safari中调试”设置为打开。

我关闭了此功能，并且一些消息被打印到输出消息中，但没有打印到控制台消息中。但是，其中一条日志消息说：

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

这是因为我以前使用以下命令将项目捆绑在一起，以便在实际设备上进行测试：

react-native bundle --minify

这捆绑了没有“开发模式”。要允许开发人员消息，请包括--dev标志：

react-native bundle --dev

并且console.log消息又回来了！如果不捆绑为一个真正的设备，不要忘了再点jsCodeLocation在AppDelegate.m本地主机（我做到了！）。

在Xcode Simulator中按[command + control + Z]，选择“远程调试JS”，然后按[command + option + J]打开Chrome开发者工具。

Xcode模拟器图

参考：调试React Native Apps

在React-Native中获取日志非常简单

使用console.log和console.warn

console.log('character', parameter)

console.warn('character', parameter)

您可以在浏览器控制台中查看此日志。如果要检查设备日志或说生产APK日志，可以使用

adb logcat

adb -d logcat

可以帮助您的react-native-xlog模块是微信的react-native Xlog。可以在Xcode控制台和日志文件中输出，产品日志文件可以帮助您调试。

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');

开发时间记录

对于开发时间记录，可以使用console.log（）。重要的一点是，如果要在生产模式下禁用日志记录，则在应用程序的Root Js文件中，只需分配这样的空白功能-console.log = {}它将完全禁用整个应用程序中的整个日志发布，这在生产中实际上是必需的模式作为console.log会消耗时间。

运行时记录

在生产模式下，还需要在真实用户实时使用您的应用程序时查看日志。这有助于了解错误，用法和不需要的情况。市场上有许多为此提供的第三方支付工具。我使用的其中之一是Logentries

好消息是Logentries也有React Native Module。因此，使用移动应用程序启用运行时日志记录将花费很少的时间。

大约一个月前发布的内容是“ Create React Native App”，它是一个很棒的样板，可让您（花费最少的精力）使用Expo应用程序在移动设备（带摄像头的任何设备）上实时显示您的应用程序的外观。它不仅具有实时更新，而且还允许您像在开发Web时一样在终端中查看控制台日志，而不必像以前使用React Native那样使用浏览器。

当然，您必须使用该样板创建一个新项目...但是，如果您需要迁移文件，那应该不是问题。试一试。

编辑：实际上，它甚至不需要相机。我说的是扫描QR码，但您也可以输入一些内容与服务器同步，而不仅仅是QR码。

使用时有两个选项可调试或获取react native应用程序的输出

仿真器或真实设备

对于首次使用模拟器：请使用

react-native log-android或react-native log-ios

获取日志输出

在真实设备上摇动设备

因此，菜单将来自您选择远程调试的位置，它将在浏览器中打开此屏幕。因此您可以在“控制台”选项卡中查看日志输出。

使用React Native调试器进行日志记录和Redux存储 https://github.com/jhen0409/react-native-debugg

只需下载它并作为软件运行，然后从模拟器启用“调试”模式即可。

它支持其他调试功能，就像chrome开发人员工具中的element一样，这有助于查看提供给任何组件的样式。

对redux开发工具的最后完整支持

1. 把console.log("My log text")你的代码
2. 转到命令行工具
3. 将自己放置在其开发文件夹中

在Android中：

• 编写以下命令：React-native log-android

在IOS中：

• 编写以下命令：React-native log-ios

您可以从设备上使用远程js debug选项，也可以仅对iOS使用react-native log-android和react-native log- ios。

console.log（）是调试代码的简便方法，但是在显示任何状态时都需要与arrow函数或bind（）结合使用。您可能会找到有用的链接。

您可以通过2种方法执行此操作

1>通过使用警告

console.warn("somthing " +this.state.Some_Sates_of_variables);

2>使用警报每次到达警报时这都是不好的，那么每次弹出都会打开，因此如果执行循环意味着不希望使用此方法

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);

使用Windows和Android Studio的用户：

您将在Android Studio的Logcat下找到它。这里显示了很多日志消息，因此为您创建“ ReactNativeJS”过滤器可能更容易，该过滤器仅显示在react native应用程序内部创建的console.log消息。

每个开发人员都面临使用react native进行调试的问题，即使我也遇到过这个问题，我也提到了这一点，并且该解决方案对我来说在初始阶段就足够了，它涵盖了几种帮助我们尝试使用对我们而言感到满意的方法

1. 使用console.log进行调试
2. 使用Nuclide调试代码（逻辑）
3. 使用Chrome调试代码（逻辑）
4. 使用Xcode调试GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

您还可以使用Reactotron，它将为您提供不仅仅是日志记录的更多功能。 https://github.com/infinitered/reactotron

有几种方法可以实现此目的，我列出了它们，并在使用它们时也包括了缺点。您可以使用：

1. console.log并查看日志记录语句，而无需从开发工具，Android Studio和Xcode中选择远程调试选项。或者您可以选择使用远程调试选项并在chrome开发工具或vscode或任何其他支持调试的编辑器上查看日志记录，因此必须谨慎，因为这会减慢整个过程的速度。
2. 您可以使用，console.warn但是移动屏幕上会充满那些奇怪的黄色框，根据您的情况可能不可行。
3. 我遇到的最有效的方法是使用第三方工具Reactotron。一个简单易配置的工具，使您可以查看不同级别的每个日志记录语句（错误，调试，警告等）。它为您提供了GUI工具，可显示您应用程序的所有日志记录，而不会降低性能。

您使用与常规网络相同的内容。该console命令在这种情况下也适用。例如，你可以使用console.log()，console.warn()， console.clear()等。

console在运行React Native应用程序进行记录时，可以使用Chrome Developer来使用该命令。

console.log() 是从开发人员菜单使用远程js调试器时查看登录控制台的最佳和简单方法

Chrome Devtool是记录和调试的最佳，最简便的方法。

如果您使用的是osx并使用仿真器，则可以console.log直接在safari Web检查器中查看s。

Safari =>开发=>模拟器-[此处是您的模拟器版本] => JSContext

通常有两种情况需要调试。

1. 当我们遇到与数据有关的问题时，我们想检查数据并在这种情况下调试与数据有关的问题 console.log('data::',data)

   远程调试js是最好的选择。

2. 其他情况是与UI和样式相关的问题，在这种情况下，我们需要检查组件的样式，在这种情况下，react-dev-tools是最佳选择。

   这两种方法都在这里提到。

console.log可以用于任何JS项目。如果您在localhost中运行该应用程序，那么显然它与任何javascript项目都相似。但是，在使用模拟器或任何设备时，将该模拟器连接到我们的本地主机，我们可以在控制台中看到。