如何登录 React Native

使用 console.log、console.warn 等。

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

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

---

console.log 有效。

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

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

---

Pre 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

---

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

通过以下步骤，您应该可以访问 Chrome 开发者工具，您可以在其中看到您的 console.log 语句。

脚步

如果您尚未使用 react-native run-android 或 react-native run-ios 运行应用程序，请安装 Google Chrome 打开开发者菜单 Mac：⌘+D for iOS 或⌘M for Android iOS Windows/Linux：摇晃 Android 手机 选择调试JS Remotely 这应该在 Chrome 中启动调试器 在 Chrome 中：工具 -> 更多工具 -> 开发人员选项，并确保您在控制台选项卡上

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

---

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

https://i.stack.imgur.com/TBBsa.png

Visual Studio Code 通常对 React Native 友好。

---

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

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

---

在要记录数据的地方，使用

console.log("data")

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

npx react-native log-android

对于 iOS：

npx react-native log-ios

---

我更喜欢向你们推荐使用 React Native Debugger。您可以使用此命令 (Mac only) 下载并安装它。

brew update && brew cask install 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 消息又回来了！如果您不捆绑真实设备，请不要忘记将 AppDelegate.m 中的 jsCodeLocation 重新指向 localhost（我做到了！）。

---

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

Xcode Simulator Img

参考：Debugging 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 应用程序的输出：

1.模拟器或真机

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

react-native log-android

或者

react-native log-ios

获取日志输出

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

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

https://i.stack.imgur.com/7kBOc.png

---

开发时间记录

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

运行时记录

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

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

---

大约一个月前刚刚发布的东西是“创建 React Native App”，这是一个很棒的样板，它允许您（以最小的努力）使用 Expo 应用程序在您的移动设备（任何带有相机）上显示您的应用程序的样子.它不仅具有实时更新，而且还允许您在终端中查看控制台日志，就像在为 Web 开发时一样，而不必像之前使用 React Native 那样使用浏览器。

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

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

---

可以帮助您的 react-native-xlog 模块是 WeChat 的 Xlog 用于 React Native。这可以在 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');

---

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

Safari → 开发 → 模拟器 - [你的模拟器版本在这里] → JSContext

---

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

当您在运行 React Native 应用程序时进行日志记录时，您可以使用 Chrome 开发人员使用 console 命令。

---

您可以使用设备上的远程 js 调试选项，也可以简单地使用 react-native log-android 和 react-native log-ios for iOS。

---

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

---

每个开发人员都面临着使用 React Native 进行调试的问题，甚至我也遇到过。我指的是这个，解决方案对我来说在初始级别就足够了。它涵盖了一些帮助我们尝试和使用任何让我们感到舒适的方法。

使用 console.log 调试 使用 Nuclide 调试代码（逻辑） 使用 Chrome 调试代码（逻辑） 使用 Xcode 调试 GUI

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

---

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

在安卓中：

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

在 iOS 中：

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

---

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

---

https://i.stack.imgur.com/9oxIc.jpg

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

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

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

最后完全支持 Redux 开发工具。

---

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

---

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

---

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

当我们遇到与数据相关的问题时，我们想检查我们的数据并与数据相关的调试。在这种情况下，console.log('data::', data) 和远程调试 JavaScript 是最好的选择。另一种情况是 UI 和样式相关的问题，我们需要检查组件的样式。在这种情况下，react-dev-tools 是最好的选择。

Both of the methods are mentioned here。

---

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

通过使用警告 console.warn("something" + this.state.Some_Sates_of_variables);通过使用警报。每次都这样不好。如果它达到警报，那么每次都会打开一个弹出窗口，所以如果进行循环，则意味着不建议使用它。 Import the {Alert} from 'react-native' // 使用这个警报 Alert.alert("something " +this.state.Some_Sates_of_variables);

---

使用 Windows 和 Android Studio 的用户：

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

---

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

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

---