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

Question

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

Answer 1

模拟器中的

Cmd + D 。它会弹出Chrome，然后你可以使用开发人员工具。

编辑：

现在已在help docs。

中进行了链接

Answer 2

调试React Native Apps

要调试您的反应应用的javascript代码，请执行以下操作：

在iOS模拟器中运行您的应用程序。
按Command + D，网页应在http://localhost:8081/debugger-ui打开。（目前仅限Chrome）或使用Shake Gesture
启用Pause On Caught Exceptions以获得更好的调试体验。
按Command + Option + I打开Chrome开发者工具，或通过View - ＆gt;打开它Developer - ＆gt; Developer Tools。
您现在应该可以像往常一样进行调试。

可选

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

Live Reload

要激活Live Reload，请执行以下操作：

在iOS模拟器中运行您的应用程序。
按Control + Command + Z。
现在，您会看到Enable/Disable Live Reload，Reload和Enable/Disable Debugging选项。

Answer 3

对于Android应用，如果您使用的是Genymotion，则可以按CMD + m切换菜单，但您可能需要在菜单中启用它。

取消小部件
通过CMD + m点击 chrome in chrome

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 确实为我启动了调试浏览器窗口。

这是弹出的屏幕：

React Native debugging options

More details here.

Answer 7

如果您想在Windows上使用Android设备进行调试，只需打开命令提示符，然后键入（确保您的adb正常工作）

adb shell input keyevent 82

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

然后选择

debug JS Remotely

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

Answer 8

在Debian 8（Jessie）上调试react-native 0.40.0可以通过在Android模拟器中运行应用程序时在Chromium或Firebug中导航到http://localhost:8081/debugger-ui来完成。要访问应用内开发人员菜单，请在另一个终端窗口中运行以下命令，如here所示：

adb shell input keyevent 82

Answer 9

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

实时重新加载

react-native使您可以非常轻松地使用⌘+ R键查看更改，甚至只需启用实时重新加载，而watchman将会刷新＆＃34;具有最新变化的模拟器。如果您收到错误，可以从该红色屏幕的行号中获取线索。一些撤消将使您恢复工作状态并重新开始。
<强> console.log('yeah, seriously.')

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

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

处理外部库或其他开发人员编写的包需要更多的工作来调试，因此像Chrome Debugging这样的好工具

有时它来自本地反应平台本身，所以谷歌搜索反应原生问题肯定会有所帮助。

希望这可以帮助那些人。

Answer 10

adb logcat *:S ReactNative:V ReactNativeJS:V

在Android日志终端中运行。

Answer 11

对我来说，在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 12

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

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

转到顶部菜单中的来源，在右侧文件资源管理器中找到您的js类文件
您可以在视图中放置断点并调试其中的代码，如图所示。

Answer 13

对于Android仿真器，代替 Cmd + M ，在Windows中按 F10 。模拟器开始显示所有的本机调试选项。

Answer 14

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

如果您使用它，请不要忘记在模拟器中启用Debug JS。

Answer 15

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

Answer 16

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

硬件＆gt;键盘＆gt;连接键盘

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

Answer 17

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

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

确保你有铬。

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

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

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

Answer 18

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

Flipper是Android和iOS Mobile调试工具，未在react native中使用调试模式。

自RN 0.62（请参见link）以来， Flipper 已使用默认项目初始化。

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

Flipper的最大好处就是没有很多插件，但是您也可以轻松地看到Android / iOS设备控制台的调试信息。

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

布局插件包括辅助功能模式和目标模式。

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

Answer 19

在文件路径中有空格可以阻止 Cmd + D 工作。我将项目移动到没有空间的位置，我终于让Chrome调试器工作了。好像是bug。

Answer 20

如果您使用的是Redux，我强烈推荐使用React Native Debugger。它包括Chrome devtools，还有Redux devtools和React devtools。

Redux Devtools ：这使您可以查看您的操作，并在它们之间来回切换。它还允许您查看您的redux商店，并具有自动区分每个操作的更新状态的先前状态的功能，因此您可以在一系列操作中来回查看。

React Devtools ：这允许您检查某个组件，即它的所有组件以及它的组件状态。如果您有一个组件状态是布尔值，它允许您单击它以切换它，并查看应用程序在更改时的反应。很棒的功能。

Chrome Devtools 允许您查看所有控制台输出，使用断点，暂停调试器;等标准调试功能。如果右键单击Redux Devtools中列出您的操作的区域并选择“允许网络检查”，则可以在Chrome Devtools的网络选项卡中检查您的API调用，这是很好的。

总之，将这些全部集中在一个地方真是太棒了！如果您不需要其中一个，您可以打开/关闭它。获取React Native Debugger并享受生活。

Answer 21

非常简单只需两个命令

For IOS $ react-native log-ios
For Android $ react-native log-android

Answer 22

假设您要在 Android模拟器上显示此菜单

然后，尝试⌘+m在Mac上的Android模拟器上弹出此开发设置对话框。
如果没有显示，请转到AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box。
然后重试⌘+m。
如果它仍未显示，请转到正在运行的模拟器设置，然后在Send keyboard shortcuts to组合框/下拉列表中选择Emulator controls (default)选项。

然后重试⌘+m。
我希望这会有所帮助，它对我有用。

Answer 23

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

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

react-native-debugger

现在还有几天，您可以直接使用下面的链接来帮助您。

chrome-developer-tools

Answer 24

您可以使用Safari调试应用的iOS版本，而不必启用“远程调试JS”，只需执行以下步骤：

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

Answer 25

还有一个非常好的debuger名称Reactotron。 https://github.com/infinitered/reactotron

您不必处于调试模式以查看某些数据值，并且有很多选项。

去看看真的很有用。 ;）

Answer 26

使用可视化代码工作室调试本地android和ios应用程序的最佳方法

第1步。

安装 React Native-Full Pack 扩展

第2步。

使用 USB调试模式连接移动设备，或从android studio中打开模拟器。

第3步。

在Visual Code Studio中单击左侧菜单中的调试选项单击添加配置，然后选择 React Native ，然后创建 launch.json

第4步。

长按手机背面的手机中的“打开开发人员”选项按下或摇动手机，然后启用远程调试js

第5步。

最后一步，点击播放按钮，然后选择调试android 或调试ios

有关更多信息，请参见此链接

https://medium.com/@tunvirrahmantusher/android-debug-with-vscode-for-react-native-96f54d73462a

Answer 27

首先在ios模拟器中，如果按[command + D]键，则可以看到此屏幕。

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

您可能会看到这样的React Native Debugger页面。

然后打开您的检查器[f12]，然后转到控制台选项卡对其进行调试！：）

Answer 28

第1步： 将debugger放在要停止脚本的位置，例如：

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

当控件进入此代码块时，这将暂停调试器。

第2步： 按 ios模拟器上的Cmd+D和 Android模拟器上的Cmd+M。如果您使用的是真实设备，请摇动设备以打开开发菜单，如果您不想摇动设备，请按this blog

第3步： 选择Enable Remote JS Debugging，这将打开Chrome

第4步： 选择Developer Tools.

第5步： 无论您在代码中编写Sources，您的调试器都会在debugger标签中暂停。转到控制台并键入要调试的任何参数（存在于代码块中），如：要再次转到下一个调试器点，请转到Sources - ＆gt;单击“恢复脚本执行”按钮（右上角的蓝色按钮）

将调试器放在想要暂停脚本的位置。

享受调试!!

Answer 29

实际上非常简单。只需按cmd D（如果在Mac上），模拟器将创建一个弹出菜单。从那里只需点击＆＃34; Debug JS Remotely＆＃34;或类似的东西。请注意，在执行与某些软件包相关的代码时运行调试程序会让人产生问题。我遇到了react-native-maps和调试器的问题。但这是固定的。在大多数情况下，你应该没事。

Answer 30

使用 Flipper 或 reactotron。每个都有自己的好处，并且不需要您启用调试模式，因此您的环境不会变慢！

Answer 31

在React-Native调试中要容易得多。

要在IOS中调试

cmd + d

ctrl + cmd + z （适用于模拟器）

在android中调试

触摸摇动设备（确保您的开发者选项已启用）

Answer 32

如果您在Atom编辑器中使用Nuclide进行React Native App开发，那么您也可以使用＆＃34; Element Inspector＆＃34;当app在开发阶段在设备上运行时，它有助于观察道具和状态值的变化。在此了解更多信息 - https://nuclide.io/docs/platforms/react-native/#element-inspector enter image description here

Answer 33

调试您的react本机应用程序只需转到以下地址：

<强>本地主机：8081 /调试器的用户界面在您的默认浏览器（chrome）和打开的开发人员工具中调试您的本机应用程序

Answer 34

如果您使用的是模拟器，请使用 Ctrl + M ＆amp;模拟器 Cmd + D
单击 - 远程调试js
Google Chrome转到控制台

Answer 35

在模拟器上按 Cmd+D 并选择 Debug 将打开浏览器调试器

Answer 36

在新版本的react-native中，您可以使用react-native log-android或react-native log-android以开发模式查看应用程序的日志。

Answer 37

在Windows中并使用Android模拟器，您可以执行以下步骤：

模拟器运行并在其上运行应用程序后，按菜单按钮，然后选择＆＃34;远程调试JS＆＃34;或＆＃34;在Chrome中调试＆＃34; （这取决于模拟器的使用）。您可以看到下一张图片作为参考：emulator with steps image
系统会显示新的Chrome标签。您必须按Ctrl +⇧J以显示开发人员工具并开始跟踪调试步骤。 See this image as reference

此外，您应该使用console.log()功能来使调试过程更具描述性。

Answer 38

您可以从brew安装React Native Debugger。它比使用chrome中的调试器更舒适

Answer 39

这实际上取决于我在做什么。如果我正在进行UI更改或调试UI，我通常会打开实时和热重新加载并进行更改然后获得即时反馈。如果它是更具技术性的东西，我打开JS调试来查看应用程序的状态。然而，因为重新加载在本机中反应如此之快，如果状态太乱，我只是控制日志。

Answer 40

如果您想了解有关检查网络流量并了解本机UI视图层次结构的信息。借助其可扩展的插件API，React Native Update版本可提供用于调试移动应用程序的开发人员工具。

Flipper是一款用于调试移动应用程序的出色开发人员工具。该工具与react-native 62一起提供

Answer 41

如果要默认启用调试：

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

参考：Launch a React Native app with “Debug JS Remotely” enabled by default

Answer 42

如果您在连接到笔记本电脑的真实设备上运行您的应用，您可以使用react-native log-ios或react-native log-android通过终端进行调试（它也适用于模拟器）

Answer 43

您可以使用expo进行调试：https://expo.io/

Expo让Web开发人员可以构建真正适用于两者的本机应用程序通过JavaScript编写一次iOS和Android。它是开放的 source，free并使用React Native。

这是一个很棒的工具，你可以在React Europe conf观看这个研讨会：

https://www.youtube.com/watch?v=HygXkQDMSGU&t=6675s

Answer 44

反应本机调试器。它可以帮助我解决90％的问题

Answer 45

我使用的与Android中的调试策略非常类似的技术是在我的所有.js文件中包含一个名为TAG的全局变量。

const TAG = 'APP_NAME+SCREEN_NAME';

然后在需要的地方，我会做：console.log(TAG + 'ACTION');

这样，我可以跟踪操作并查看日志语句的来源。

Answer 46

如果您不想每2分钟摇动您的手机，也可以使用自定义库

我创建了一个库，使您可以在开发模式下用三指触摸而不是摇动打开开发菜单

https://github.com/pie6k/react-native-dev-menu-on-touch

您只需要将应用程序包装在其中：

从'react-native-dev-menu-on-touch'导入DevMenuOnTouch; //或：从'react-native-dev-menu-on-touch'导入{DevMenuOnTouch}

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

当您必须在真实设备上调试并且有同事坐在您旁边时，这真的很有用。

Answer 47

我使用这个库来调试本机反应项目

https://github.com/jhen0409/react-native-debugger 它包括

包括react-devtools-core的React Inspector。
包括Redux DevTools与redux-devtools-extension制作了相同的API。

或者您可以使用

For IOS $ react-native log-ios
For Android $ react-native log-android

Answer 48

在终端adb logcat *:S ReactNative:V ReactNativeJS:V
在Android Studio中打开项目，打开logcat（底部面板上的按钮）
在终端react-native run-android

构建完成后，您应该在logcat中的Android Studio中查看详细日志。

你如何调试React Native？

48 个答案:

调试React Native Apps

可选

Live Reload

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