如何在 React Native 中进行日志记录

Question

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

Answer 1

console.log 有效。

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

在iOS模拟器中，按(⌘+D)，然后按Remote JS Debugging 。这将在本地主机上打开资源 http://localhost:8081/debugger-ui。从那里，使用 Chrome 开发人员工具 JavaScript 控制台查看 console.log

Answer 2

我遇到了同样的问题：控制台消息没有出现在 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 消息回来了！如果您不是为真实设备捆绑，请不要忘记将 AppDelegate.m 中的 jsCodeLocation 重新指向本地主机（我做到了！）。

Answer 3

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

Visual Studio 代码通常对 React Native 友好。

Answer 4

使用console.log、console.warn等

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

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

Answer 5

在Xcode模拟器中按[command + control + Z]，选择Debug JS Remotely，然后按[command + option + J]打开Chrome开发者工具

Xcode Simulator Img

参考：Debugging React Native Apps

Answer 6

Pre React Native 0.29，运行控制台中的这个：

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29，运行：

react-native log-ios

或

react-native log-android

正如马丁在另一个回答中所说的那样。

这会显示所有 console.log()、错误、注释等并导致零减速。

Answer 7

React Native 的 react-native-xlog module, that can help you, is WeChat's 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');

Answer 8

大约一个月前刚刚出现的东西是 "Create React Native App," 一个很棒的样板，它允许您（以最小的努力）在您的移动设备（任何带有相机的设备）上实时显示您的应用程序的外观世博会应用程序。它不仅有实时更新，而且它可以让你在终端中看到控制台日志，就像在为网络开发时一样，而不是像我们对 React 所做的那样必须使用浏览器原生之前。

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

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

Answer 9

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

按照以下步骤，您将进入 Chrome 开发人员工具，您可以在其中查看 console.log 语句。

步骤

安装 Google Chrome，如果您还没有安装
运行应用使用 react-native run-android 或 react-native run-ios
打开开发者菜单
- Mac：⌘+D iOS 或 ⌘M Android iOS
- Windows/Linux:摇一摇Androidphone
Select Debug JS Remotely
这应该会在 Chrome
在 Chrome 中：Tools -> More Tools -> Developer Options 并确保您在 console 选项卡上

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

Answer 10

使用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

Answer 11

开发时间记录

对于开发时间日志记录，您可以使用 console.log()。一件重要的事情，如果你想在生产模式下禁用日志记录，那么在应用程序的 Root Js 文件中，只需像这样分配空白函数 - console.log = {} 它将完全禁用整个应用程序的整个日志发布，这在生产模式中实际上是必需的，因为 console.log 会消耗时间。

运行时间记录

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

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

Answer 12

您可以使用设备上的远程 js 调试选项，或者您可以简单地使用 react-native log-android 和 react-native iOS.

的日志-ios

Answer 13

console.log() 是调试代码的简单方法，但在显示任何状态时需要与箭头函数或 bind() 一起使用。您可能会发现 Stack Overflow 问题很有用。

Answer 14

console.log() 是在您的开发者菜单中使用远程 JavaScript 调试器时在控制台中查看日志的最佳且简单的方法。

Answer 15

我更愿意推荐你们使用 React Native Debugger. You can download and install it by using this command (Mac only)。

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

Answer 16

获取登录就这么简单React-Native。

使用console.log和console.warn

console.log('character', parameter)

console.warn('character', parameter)

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

adb logcat

adb -d logcat

Answer 17

使用时有两个选项可以调试或获取 React Native 应用程序的输出：

1。模拟器或真机

首次使用模拟器，请使用：

react-native log-android

或

react-native log-ios

获取日志输出

2。在真实设备上，摇动您的设备。

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

Answer 18

如果您在 OS X 上并使用模拟器，您可以直接在 Safari 的网络检查器中查看您的 console.log。

Safari → 开发 → 模拟器 - [此处为您的模拟器版本] → JSContext

Answer 19

我在开发 React Native 应用程序时使用了三种调试方法：

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

Answer 20

就console.log('debug');.

和运行它，你可以在terminal/command提示中看到日志。

Answer 21

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

当我们遇到与数据相关的问题，想要检查自己的数据，调试与数据相关的时候。那样的话，

console.log('data::', data)

远程调试 JavaScript 是最佳选择。
另一种情况是UI和样式相关的问题，我们需要检查组件的样式。在这种情况下，react-dev-tools 是最好的选择。

Both of the methods are mentioned here.

Answer 22

你可以通过两种方法做到这一点

通过使用 warn

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

通过使用警报。这每次都不好。如果它达到警报，那么每次都会打开一个弹出窗口，所以如果循环使用它就意味着不要使用它。
```
 Import the {Alert} from 'react-native'

// Use this alert
Alert.alert("something " +this.state.Some_Sates_of_variables);
```

Answer 23

使用 Windows 和 Android Studio 的用户：

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

Answer 24

console.log 可用于任何 JavaScript 项目。

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

Answer 25

每个开发者都面临着用React Native调试这个问题，我也遇到过。我指的是这个，解决方案在初始级别对我来说已经足够了。它涵盖了一些帮助我们尝试和使用我们觉得舒服的东西的方法。

使用 console.log
使用Nuclide
使用Chrome
使用Xcode调试GUI

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

Answer 26

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

只需下载并运行作为软件。然后从模拟器启用调试模式。

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

最后一次完整支持 Redux 开发工具。

Answer 27

将 console.log("My log text") 放入您的代码中
转到您的命令行工具
将自己置于其开发文件夹中

在Android中：

写这个命令：React-native log-android

在iOS中：

写这个命令：React-native log-ios

Answer 28

您也可以使用Reactotron。它将为您提供比日志记录更多的功能。

Answer 29

有一个调试器工具，您可以在设备屏幕顶部查看控制台消息。所以你不需要连接到任何会减慢你的动画或任何东西的远程调试器。您可以在这里查看：

https://github.com/fwon/RNVConsole

或者使用 expo 试试 - https://snack.expo.io/SklJHMS3S

Answer 30

有几种方法可以实现这一点，我列出了它们并包括了使用它们的缺点。

您可以使用：

console.log 并查看日志记录语句，无需从开发工具、Android Studio 和 Xcode 中选择退出远程调试选项。或者您可以选择退出远程调试选项并在 Google 开发工具、Visual Studio 代码或任何其他支持调试的编辑器上查看日志记录。你必须小心，因为这会减慢整个过程。
你可以使用console.warn，但你的手机屏幕会被那些奇怪的黄色框淹没，根据你的情况，这可能是可行的，也可能是不可行的。
我遇到的最有效的方法是使用第三方工具Reactotron。它是一个简单且易于配置的工具，使您能够查看不同级别（错误、调试、警告等）的每个日志记录语句。它为您提供了 GUI 工具，可以在不降低性能的情况下显示应用程序的所有日志记录。

Answer 31

您使用与常规网络相同的东西。 console 命令在这种情况下也有效。例如，您可以使用 console.log()、console.warn()、 console.clear() 等等

当您在运行 React Native 应用程序登录时，您可以使用 Chrome Developer 来使用 console 命令。

Answer 32

有多种登录方式。

console.warn() 将通过移动屏幕本身的日志。如果您想记录一些小事情并且不想打扰打开控制台，它会很有用。

另一个是console.log()，您必须打开浏览器的控制台才能查看日志。使用较新的 React Native 0.62+，你可以看到 节点本身的日志。因此，他们使查看新版本中的日志变得更加容易。

Answer 33

要在何处记录数据，请使用

console.log("data")

要在终端中打印此日志，请对 Android 使用此命令：

npx react-native log-android

对于iOS：

npx react-native log-ios

Answer 34

如果你使用iOS模拟器，你可以打开系统控制台登录Mac。

⌘ + space，输入“console”，按回车打开系统控制台日志，然后 select 你的模拟器。

Answer 35

您可以使用 console.log 或 React Native 提供的调试器。来自 Facebook 的 Redux, use Reactotron (recommended) or react-native-debugger. Flipper 也有利于调试。

Answer 36

如果您将 VSCode 和运行模拟器与 VSCode React Native Tools 一起使用，您可以在输出选项卡中看到 console.* 语句。确保 select 输出选项卡下拉列表中的正确子选项卡。我的当前名为 LogCat - emulator-5554.

Answer 37

将start脚本package.json编辑为

react-native start & react-native log-android

这将同时运行两个脚本

如何在 React Native 中进行日志记录

How to do logging in React Native

logging

react-native

步骤

1。模拟器或真机

2。在真实设备上，摇动您的设备。