如何在React Native中登录

小开

最佳答案

console.log作品。

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

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

小开

我遇到了同样的问题:控制台消息没有出现在Xcode的调试区域。在我的应用程序中，我用Cmd + D来打开调试菜单，并记得我已经设置了“在safari中调试”。上。

我关闭了这个，并且一些消息被打印到输出消息中，但不是我的控制台消息。然而，其中一条日志消息说:

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

这是因为我之前将我的项目与命令捆绑在一个真实设备上进行测试:

react-native bundle --minify

这个捆绑没有“;dev-mode"上。为了允许开发消息，包括--dev标志:

react-native bundle --dev

console.log消息回来了!如果你不是为一个真正的设备捆绑，不要忘记将jsCodeLocation在AppDelegate.m中重新指向localhost(我做了!)。

小开

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

Visual Studio Code通常是React Native友好的。

小开

使用console.log， console.warn等。

从React Native 0.29开始，你可以简单地运行以下命令在控制台中查看日志:

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

小开

在Xcode模拟器中按[command + control + Z]，选择远程调试JS，然后按[command + option + J]打开Chrome开发人员工具。

Xcode Simulator Img

参考:调试React原生应用程序

小开

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()、错误、注释等，并导致零减速。

小开

react-native-xlog模块，可以帮助你，是微信的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');

小开

一个月前刚刚出来的东西是“创建React Native应用程序”，一个很棒的样板，允许你(用最小的努力)在你的移动设备(任何带摄像头的)上使用Expo应用程序显示你的应用程序的样子。它不仅有实时更新，而且它将允许您在终端中查看控制台日志，就像为web开发时一样，而不是像我们之前使用React Native那样使用浏览器。

当然，你必须用那个样板文件做一个新项目……但如果您需要迁移您的文件，这应该不是问题。试试看吧。

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

小开

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

以下步骤应该会让你进入Chrome开发人员工具，在那里你将能够看到你的console.log语句。

步骤

安装谷歌Chrome，如果你还没有安装的话
使用react-native run-android或react-native run-ios运行应用程序
打开开发者菜单
- Mac: ⌘+D用于iOS， ⌘M用于Android iOS
- Windows/Linux:摇一摇Android手机
- 选择Debug JS Remotely
- 这将启动Chrome中的调试器
- 在Chrome中:Tools -> More Tools -> Developer Options并确保你在console选项卡上

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

小开

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

小开

开发时间日志

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

运行时日志

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

好的事情是Logentries也有React Native Module。因此，它将花费非常少的时间为您启用运行时日志与您的移动应用程序。

小开

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

小开

Console.log()是调试代码的简单方法，但在显示任何状态时，需要与箭头函数或bind()一起使用。你可能会发现Stack Overflow问题如何用React Native在控制台中打印状态?< / >很有用。

小开

当你从开发者菜单中使用远程JavaScript调试器时，console.log()是在控制台中查看你的日志的最好和简单的方法。

小开

我更倾向于推荐你们使用React本机调试器。你可以使用这个命令(苹果只)下载并安装它。

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

小开

在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. 在一个真实的设备上，摇动你的设备。

所以菜单将来自你选择远程调试的地方，它将在你的浏览器中打开这个屏幕。因此，您可以在console选项卡中看到日志输出

小开

如果你在OS X上使用模拟器，你可以直接在Safari的web检查器中查看你的__abc0。

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

小开

在开发React Native应用程序时，我使用三种方法来调试:

console.log():显示在控制台中
console.warn():显示在应用程序底部的黄色框中
alert():显示为提示符，就像它在web上做的那样

小开

只是console.log('debug');。

运行它时，您可以在终端/命令提示符中看到日志。

小开

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

当我们面临与数据相关的问题，我们想检查数据和调试与数据相关的问题时。这样的话，

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

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

这里提到了这两种方法。

小开

有两种方法可以做到这一点

使用warn

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

使用Alert。这并不是每次都是好的。如果它达到一个警告，那么每次弹出窗口将被打开，所以如果做循环，这意味着它是不可取的使用。
```
 Import the {Alert} from 'react-native'


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

小开

Windows和Android Studio用户:

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

小开

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

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

小开

每个开发人员都面临着使用React Native进行调试的问题，甚至我也遇到过。我参考这个和解决方案是充分为我在初始水平。它涵盖了一些方法，帮助我们尝试和使用任何我们觉得舒服的东西。

使用console.log进行调试
使用核素调试代码(逻辑)
使用Chrome调试代码(逻辑)
使用Xcode来调试GUI

< a href = " https://codeburst。Io /react-native-debug -tools-3a24e4e40e4" rel="nofollow noreferrer">https://codeburst.io/react-native-debugging-tools-3a24e4e40e4 .

小开

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

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

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

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

小开

在代码中放入console.log("My log text")
使用命令行工具
将自己置于其发展文件夹中

在Android:

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

在iOS:

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

小开

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

小开

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

https://github.com/fwon/RNVConsole

或者使用expo进行try - https://snack.expo.io/SklJHMS3S

小开

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

你可以使用:

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

小开

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

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

小开

有多种方法可以记录日志。

console.warn ()将在移动屏幕本身通过日志。如果你想记录小事情，不想打开控制台，它可以很有用。

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

小开

您想在哪里记录数据，使用

console.log("data")

要在终端上打印日志，使用下面的命令:

npx react-native log-android

对于iOS来说:

npx react-native log-ios

小开

如果你使用iOS模拟器，你可以在Mac上打开系统控制台日志。

⌘ + 空间，输入“控制台”，按输入打开系统控制台日志，并选择模拟器。

小开

你可以使用console.log或React Native中可用的调试器。对于回来的，使用Reactotron(推荐)或react-native-debugger。来自Facebook的鳍状肢也适合调试。

小开

如果你正在使用VSCode并使用VSCode React原生工具运行模拟器，你可以在输出选项卡中看到console.*语句。确保在输出选项卡内的下拉菜单中选择正确的子选项卡。我目前的名字是LogCat模拟器-5554。

小开

将package.json中的开始脚本编辑为

react-native start & react-native log-android

这将并发地运行两个脚本