你如何调试React Native？

Question

当应用程序在应用程序模拟器中运行时,如何使用React Native调试其React代码？

Answer 1

Cmd+D来自模拟器内部.它会弹出Chrome,然后你可以使用开发人员工具.

编辑:

现在,这已在帮助文档中链接.

Answer 2

调试React Native Apps

要调试您的react应用程序的javascript代码,请执行以下操作:

1. 在iOS模拟器中运行您的应用程序.
2. 按下Command + D并在http:// localhost:8081/debugger-ui上打开一个网页.(目前仅限Chrome)或使用Shake Gesture
3. 启用Pause On Caught Exceptions以获得更好的调试体验.
4. 按此Command + Option + I按钮打开Chrome开发者工具,或通过View- > Developer- > 打开它Developer Tools.
5. 您现在应该能够像平常那样进行调试.

可选的

安装适用于Google Chrome 的React Developer Tools扩展程序.如果React在打开开发人员工具时选择选项卡,则可以导航视图层次结构.

Live Reload

要激活Live Reload,请执行以下操作:

1. 在iOS模拟器中运行您的应用程序.
2. 按Control + Command + Z.
3. 现在,您将看到Enable/Disable Live Reload,Reload和Enable/Disable Debugging选项.

Answer 3

对于Android应用程序,如果您正在使用Genymotion,您可以通过按切换菜单CMD + m,但您可能必须通过执行此操作在菜单中启用它.

• Untick 小部件
• CMD + m单击chrome中的debug启用它

Answer 4

除了其他答案.您可以使用调试器语句调试react-native

例:

debugger; //breaks execution

您的chrome dev工具必须打开才能工作

Answer 5

试试这个程序:https://github.com/jhen0409/react-native-debugger

适用于:windows,osx和linux.

它支持:react native和redux

您还可以检查虚拟组件树并修改应用程序中反映的样式.

Answer 6

cmd ⌘+ D奇怪的是没有为我工作.在iOS模拟器中按ctrl+ cmd ⌘+ Z确实为我启动了调试浏览器窗口.

这是弹出的屏幕:

更多细节在这里.

Answer 7

如果你想在Windows上使用Android设备进行调试,只需打开命令提示符,然后输入(确保你的adb正常工作)

adb shell input keyevent 82

它会提示像图像一样的屏幕

然后选择

debug JS Remotely

它将自动打开一个新窗口.然后打开检查元件或按F12键进入控制台.

Answer 8

在你的应用程序在android模拟器中运行时,可以通过导航到Chromium或Firebug中的http:// localhost:8081/debugger-ui来调试 Debian 8(Jessie)上的react-native 0.40.0 .访问中,应用程序开发人员的菜单,在另一个终端窗口中运行以下命令,指出这里:

adb shell input keyevent 82

Answer 9

我没有足够的声誉评论以前的答案,这些答案很棒.:)以下是我在开发react-native app时调试的一些方法.

1. 实时重装

   react-native使用⌘+ R键可以非常轻松地查看更改,甚至可以启用实时重新加载,而watchman将使用最新更改"刷新"模拟器.如果您收到错误,可以从该红色屏幕的行号中获取线索.一些撤消将使您恢复工作状态并重新开始.

2. console.log('yeah, seriously.')

   我发现自己更喜欢让程序运行并记录一些信息而不是添加debugger断点.(艰难的调试器在尝试使用外部软件包/库时非常有用,并且它带有自动完成功能,因此您可以了解可以使用的其他方法.)

3. Enable Chrome Debuggingdebugger;在程序中有断点.

那么它取决于您遇到的错误类型以及您如何调试的偏好.对于大多数人来说undefined is not an object (evaluating 'something.something'),方法1和方法2对我来说已经足够了.

而处理外部库或其他开发人员编写的包需要更多的努力来调试,因此这是一个很好的工具 Chrome Debugging

有时它来自本地反应平台本身,因此谷歌搜索反应原生问题肯定会有所帮助.

希望这有助于那里的人.

Answer 10

adb logcat *:S ReactNative:V ReactNativeJS:V

在Android日志终端中运行此命令.

Answer 11

而不是Cmd+M,对于F10Windows中的Android Emulator Press .模拟器开始显示所有react-native调试选项.

Answer 12

如果您使用的是Microsoft Visual Code,请安装React Native Tools扩展.然后,您只需单击所需的行号即可添加断点.请按照以下步骤设置和调试应用程序:

如果您使用它,请不要忘记在模拟器中启用Debug JS Remotely.

Answer 13

对我来说,在React-Native上调试的最佳方法是使用"Reactotron".

安装Reactotron然后将这些添加到你的package.json:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

现在,只需登录您的代码即可.例如:console.tron.log('debug')

Answer 14

1. 在模拟器中运行您的应用程序 - react-native run-ios
2. 按ctrl + d并单击Debug JS Remotely

1. 网页应该在http:// localhost:8081/debugger-ui打开,如果没有输入网址并转到Chrome中的此链接
2. 右键单击页面并单击Inspect,它应该打开chrome的开发人员工具

3. 转到顶部菜单中的源代码,在右侧文件资源管理器中找到您的js类文件

4. 您可以在视图中放置断点并调试其中的代码,如图中所示.

Answer 15

React Native 0.62 发布 -官方解决方案是 Flipper

Flipper是 Android 和 iOS 移动调试工具，无需在 React Native 中使用调试模式。

从 RN 0.62（见此链接）开始，Flipper使用默认项目进行初始化。

Flipper 有一些用于调试的插件。插件包括Layout, Network,Shared preferences

Flipper 最大的好处是插件不是很多，但是你也可以很容易地看到 Android / iOS 设备控制台调试。

Flipper 也会提醒您有关崩溃或网络拒绝的信息。

布局插件包括无障碍模式和目标模式。

您还可以在应用程序中查看原始网络请求/响应。

Answer 16

如果要默认启用调试：

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

要使其在 Android 上运行：

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

参考：启动 React Native 应用程序，默认启用“Debug JS Remotely”

Answer 17

首先在你的 ios 模拟器中，如果你按下 [command + D] 键，那么你可以看到这个屏幕。

然后单击远程调试 JS 按钮。

之后你可能会看到这样的 React Native Debugger 页面。

然后打开您的检查器 [f12]，并转到控制台选项卡调试它！:)

Answer 18

对于Android应用程序.按Ctrl + M远程选择调试js它将在chrome中打开一个新窗口,其中包含url http:// localhost:8081/debugger-ui.您现在可以在Chrome浏览器中调试应用程序

Answer 19

对于Android：Ctrl + M（模拟器）或摇动手机（在设备中）以显示菜单。

对于iOS：Cmd + D或摇动手机以显示菜单

确保您有铬。

在显示的菜单上，选择Debug JS Remotely Option。

Chrome将在localhost：8081 / debugger-ui上自动打开。您也可以通过此链接手动转到调试器。

在那里显示控制台，您可以看到记录的日志。

Answer 20

默认情况下,我的ios模拟器没有接受击键,这就是为什么cmd-D不起作用的原因.我不得不使用模拟器的菜单打开键盘的设置:

硬件>键盘>连接键盘

现在cmd-D启动了chrome调试.

Answer 21

有在文件路径的空间防止了Cmd+ D从工作.我将项目移动到没有空间的位置,我终于让Chrome调试器工作了.好像是一个bug.

Answer 22

您可以使用 Safari 调试 iOS 版本的应用程序，而无需启用“远程调试 JS”，只需按照以下步骤操作：

\n\n

1. Enable Develop menu in Safari: Preferences \xe2\x86\x92 Advanced \xe2\x86\x92 Select "Show Develop menu in menu bar"\n2. Select your app\'s JSContext: Develop \xe2\x86\x92 {Your Simulator} \xe2\x86\x92 Automatically Show Web Inspector for JS JSContext\n3. Safari\'s Web Inspector should open which has a Console and a Debugger\n

\n

Answer 23

这是使用react native调试器应用程序的另一种方法。

您可以使用以下链接下载应用程序，它是用于管理redux存储以及源代码的非常好的应用程序。

反应本机调试器

现在，您也可以直接使用下面的链接来帮助您。

chrome开发人员工具