PROSAGA码农传奇-React-如何登录React Native？

23 条回复

0#
回复此人
故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 你可以用2种方法做到这一点 </强> </p> <P> 1 GT;通过使用警告 </p> <pre> <code> console.warn("somthing " +this.state.Some_Sates_of_variables); </code> </pre> <P> 2 - ;通过使用警报如果它达到警报每次都不好，那么每次pop都会被打开，所以如果做循环意味着不喜欢使用它 </p> <pre> <code> Import the {Alert} from 'react-native' // use this alert Alert.alert("somthing " +this.state.Some_Sates_of_variables); </code> </pre> </DIV>

编辑
1#
回复此人
不丶离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Chrome Devtool是记录和调试的最佳和最简单的方法。 </p> </DIV>

编辑
2#
回复此人
滔滔江水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我更喜欢推荐你们使用React Native Debugger。您可以使用此命令下载并安装它。 </p> <P> <code> brew update && brew cask install react-native-debugger </code> </p> <P> 要么 </p> <P> 只需查看下面的链接。 </p> <P> <a href="https://github.com/jhen0409/react-native-debugger" rel="noreferrer"> https://github.com/jhen0409/react-native-debugger </A> </p> <P> 快乐黑客！ </p> </DIV>

编辑
3#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是哪里的<strong> Chrome开发者工具 </强> 是你的朋友 </p> <P> 通过以下步骤，您可以访问Chrome开发者工具，在那里您可以看到自己的工具 <code> console.log </code> 声明。 </p> <H2> 脚步 </H2> <OL> <LI> 安装 <a href="https://www.google.com/chrome/browser/desktop/index.html" rel="noreferrer"> 谷歌浏览器 </A> ，如果你还没有 </LI> <LI> 使用运行app <code> react-native run-android </code> 要么 <code> react-native run-ios </code> </LI> <LI> 打开开发者菜单 <UL> <LI> 苹果电脑： <code> 鈱�+D </code> 适用于iOS或 <code> 鈱楳 </code> 对于Android iOS </LI> <LI> Windows / Linux：摇动Android手机 </LI> </UL> </LI> <LI> 选择 <code> Debug JS Remotely </code> </LI> <LI> 这应该在Chrome中启动调试器 </LI> <LI> 在Chrome中： <code> Tools -> More Tools -> Developer Options </code> 并确保你在 <code> console </code> 标签 </LI> </醇> <P> 现在每当一个 <code> console.log </code> 声明已执行，它应出现在Chrome Dev Tools中。官方文件是 <a href="https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools" rel="noreferrer"> 这里 </A> 。 </p> </DIV>

编辑
4#
回复此人
离线请留言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> <code> console.log() </code> </强> 从开发人员菜单中使用远程js调试器时，是查看登录控制台的最佳和最简单的方法 </p> </DIV>

编辑
5#
回复此人
⑩Ⅵ嵗Ｄ夨憶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我在开发react-native应用程序时使用了3种方法进行调试 </p> <pre> <code> 1- console.log() // shows in console 2- console.warn() // shows in yellow box bottom of application 3- alert() // shows as a prompt just like it does in web </code> </pre> </DIV>

编辑
6#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> console.log可用于任何JS项目。如果你在localhost中运行应用程序，那么很明显它与任何javascript项目相似。但是在使用模拟器或任何设备时，将该模拟器连接到我们的localhost，我们可以在控制台中看到。 </p> </DIV>

编辑
7#
回复此人
不见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用时，有两个选项可以调试或获取您的react本机应用程序的输出 </p> <BLOCKQUOTE> <P> 仿真器或真实设备 </p> </BLOCKQUOTE> <P> 首次使用模拟器：使用 </p> <BLOCKQUOTE> <P> react-native log-android或react-native log-ios </p> </BLOCKQUOTE> <P> 获取日志输出 </p> <BLOCKQUOTE> <P> 在真正的device.shake你的设备 </p> </BLOCKQUOTE> <P> 因此菜单将来自您选择远程调试的位置，它将在您的浏览器中打开此屏幕。所以你可以在控制台选项卡中看到你的日志输出。 <a href="https://i.stack.imgur.com/7kBOc.png" rel="nofollow noreferrer"> <img src =“https://i.stack.imgur.com/7kBOc.png”alt =“在此处输入图片说明”/> </A> </p> </DIV>

编辑
8#
回复此人
一生浮华 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <code> console.log </code> 作品。 </p> <P> 默认情况下，在iOS上，它会记录到Xcode内的调试窗格。 </p> <P> 从IOS模拟器按（ <KBD> 鈱榎[R </KBD> + <KBD> d </KBD> ）并按的<strong> 远程JS调试 </强> 。这将打开一个资源， <a href="http://localhost:8081/debugger-ui" rel="noreferrer"> HTTP：//本地主机：8081 /调试器的用户界面 </A> 在localhost上。从那里使用Chrome Developer工具javascript控制台来查看 <code> console.log </code> </p> </DIV>

编辑
9#
回复此人
NetworkAttachedStorage | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 大约一个月前刚出现的东西是“创建React Native App”，这是一个非常棒的样板，它允许您（用最少的努力）使用Expo应用程序显示您的应用程序在您的移动设备（使用相机的任何东西）上显示的内容。它不仅有实时更新，而且的<strong> 它将允许您在终端中查看控制台日志，就像在开发Web时一样 </强> 而不是像我们之前使用React Native那样使用浏览器。 </p> <P> 当然，您必须使用该样板制作一个新项目......但如果您需要迁移文件，那应该不是问题。试一试。 </p> <P> <EM> 编辑：实际上它甚至不需要相机。我说过要扫描二维码，但你也可以输入一些东西与服务器同步，而不仅仅是二维码。 </EM> </p> </DIV>

编辑
10#
回复此人
蜡笔小辛 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用 <code> console.debug("text"); </code> </p> <P> 您将在终端内看到日志。 </p> <P> 脚步： </p> <UL> <LI> 运行应用程序： </LI> </UL> <pre class="lang-sh prettyprint-override"> <code> react-native run-ios # For iOS react-native run-android # For Android </code> </pre> <UL> <LI> 运行记录器： </LI> </UL> <pre class="lang-sh prettyprint-override"> <code> react-native log-ios # For iOS react-native log-android # For Android </code> </pre> </DIV>

编辑
11#
回复此人
林老爷的日常 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只是console.log（'debug'）; </p> <P> 运行它你可以看到终端/ cd提示符中的日志。 </p> </DIV>

编辑
12#
回复此人
布偶的表弟派大星丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 每个开发人员都面临着本地调试问题，即使我也面对过，我提到这个问题，解决方案对我来说在初始阶段就足够了，它涵盖了一些方法，可以帮助我们尝试使用对我们来说很舒服的东西 </p> <OL> <LI> 使用console.log进行调试 </LI> <LI> 使用Nuclide调试代码（逻辑） </LI> <LI> 使用Chrome调试代码（逻辑） </LI> <LI> 使用Xcode调试GUI </LI> </醇> <P> <a href="https://codeburst.io/react-native-debugging-tools-3a24e4e40e4" rel="nofollow noreferrer"> https://codeburst.io/react-native-debugging-tools-3a24e4e40e4 </A> </p> </DIV>

编辑
13#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在React-Native中获取日志非常简单 </p> <P> 使用的<strong> 的console.log </强> 和的<strong> console.warn </强> </p> <pre> <code> console.log('character', parameter) console.warn('character', parameter) </code> </pre> <P> 您可以在浏览器控制台中查看此日志。如果您想检查设备日志或说生产APK日志，您可以使用 </p> <pre> <code> adb logcat adb -d logcat </code> </pre> </DIV>

编辑
14#
回复此人
早岁那知世事艰 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您使用的是osx并使用模拟器，则可以查看 <code> console.log </code> 直接在safari网络检查员。 </p> <P> Safari =＆gt;发展=＆gt;模拟器 - [你的模拟器版本] =＆gt; JSContext </p> </DIV>

编辑
15#
回复此人
薄情 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Visual Studio Code有一个不错的调试控制台，可以显示您的console.log。 </p> <P> <a href="https://i.stack.imgur.com/TBBsa.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/TBBsa.png”alt =“在此输入图像说明”/> </A> </p> <P> VS Code通常是React Native友好的。 </p> </DIV>

编辑
16#
回复此人
大黑骡子王 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> console.log（）是调试代码的简单方法，但在显示任何状态时需要使用箭头函数或bind（）。你可能会发现 <a href="https://stackoverflow.com/questions/48500481/how-to-print-state-in-console-with-react-native"> 链接 </A> 有用。 </p> </DIV>

编辑
17#
回复此人
满目山河 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="https://github.com/EngsShi/react-native-xlog" rel="nofollow noreferrer"> 反应天然-Xlog软件 </A> 可以帮助你的模块，是微信的 <a href="https://github.com/Tencent/mars/" rel="nofollow noreferrer"> 的Xlog </A> 反应原生的。可以在Xcode控制台和日志文件中输出，产品日志文件可以帮助您调试。 </p> <pre> <code> Xlog.verbose('tag', 'log'); Xlog.debug('tag', 'log'); Xlog.info('tag', 'log'); Xlog.warn('tag', 'log'); Xlog.error('tag', 'log'); Xlog.fatal('tag', 'log'); </code> </pre> </DIV>

编辑
18#
回复此人
一只特立独行的猪 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 开发时间记录 </强> </p> <P> 对于开发时间日志记录，您可以使用的<strong> <EM> 的console.log（） </EM> </强> 。一个重要的事情，如果你想在生产模式下禁用日志记录，那么在应用程序的Root Js文件中，只需分配这样的空白函数 - console.log = {} 它将在整个应用程序中禁用整个日志发布，这在生产模式中实际需要，因为console.log会消耗时间。 </p> <HR /> <P> 的<strong> 运行时记录 </强> </p> <P> 在生产模式下，当真实用户实时使用您的应用程序时，还需要查看日志。这有助于理解错误，使用和不需要的情况。市场上有许多第三方付费工具。其中一个我用过的是的<strong> <a href="http://logentries.com" rel="nofollow noreferrer"> Logentries </A> </强> </p> <P> 好事是Logentries有的<strong> <a href="https://www.npmjs.com/package/react-native-logentries" rel="nofollow noreferrer"> 反应原生模块 </A> </强> 同样。因此，使用移动应用程序启用运行时日志记录所需的时间非常短。 </p> </DIV>

编辑
19#
回复此人
哈哈哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 通常有两种情况需要调试。 </p> <OL> <LI> <P> 当我们面临与数据相关的问题时，我们希望在这种情况下检查与数据相关的数据和调试 <code> console.log('data::',data) </code> </p> <P> 和远程调试js是最好的选择。 </p> </LI> <LI> <P> 其他情况是UI和样式相关的问题，我们需要检查组件的样式，在这种情况下，react-dev-tools是最佳选择。 </p> <P> <a href="https://facebook.github.io/react-native/docs/debugging" rel="nofollow noreferrer"> 这里提到的两种方法。 </A> </p> </LI> </醇> </DIV>

编辑
20#
回复此人
Moso31 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用Windows和Android Studio的用户： </p> <P> 您将在Android Studio的Logcat下找到它。此处显示了大量日志消息，因此您可以更轻松地为“ReactNativeJS”创建过滤器，该过滤器仅显示在您的react本机应用程序中创建的console.log消息。 </p> </DIV>

编辑
21#
回复此人
我头上有犄角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用设备中的远程js debugly选项，也可以直接使用的<strong> react-native log-android </强> 和的<strong> react-native log-ios </强> 对于ios。 </p> </DIV>

编辑

登录后才能参与评论