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

Cmd+D从模拟器中。它将弹出Chrome，然后您可以在其中使用开发者工具。

编辑：

现在已将其链接到帮助文档中。

调试React Native应用

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

1. 在iOS模拟器中运行您的应用程序。
2. 按下，Command + D然后一个网页就会在http：// localhost：8081 / debugger-ui处打开。（目前仅适用于Chrome）或使用Shake Gesture
3. 启用“ 暂停捕获的异常”以获得更好的调试体验。
4. 按Command + Option + I打开Chrome开发者工具，或通过View-> Developer->将其打开Developer Tools。
5. 现在，您应该能够像往常一样进行调试了。

可选的

安装适用于Google Chrome 的React Developer Tools扩展。如果React在开发人员工具打开时选择选项卡，这将允许您浏览视图层次结构。

实时重载

要激活实时刷新，请执行以下操作：

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

对于Android应用程序，如果您使用的是Genymotion，则可以通过按来切换菜单CMD + m，但是您可能必须在菜单中启用它。

• 取消勾选小部件
• 通过在Chrome中CMD + m点击调试启用它

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

例：

debugger; //breaks execution

您的Chrome开发人员工具必须处于打开状态才能正常工作

如果要在Windows上使用android设备进行调试，只需打开命令提示符，然后键入（确保adb正常运行）

adb shell input keyevent 82

它将提示类似图像的屏幕

然后选择

debug JS Remotely

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

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

适用于：windows，osx和linux。

它支持：react native和redux

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

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

这是弹出的屏幕：

此处有更多详细信息。

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

adb shell input keyevent 82

我没有足够的声誉来评论以前的答案，很好。:)这是我在开发react-native应用程序时如何调试的一些方法。

1. 实时重装

   react-native使用with + R键可以非常轻松地查看您的更改，甚至仅启用实时重新加载，并且值班人员将使用最新更改“刷新”模拟器。如果出现错误，则可以从该红色屏幕的行号中获得线索。撤消几次后，您将回到工作状态并重新开始。

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

   我发现我自己喜欢让程序运行并记录一些信息，而不是添加debugger断点。（艰难的调试器在尝试使用外部包/库时非常有用，并且具有自动补全功能，因此您知道可以使用哪些其他方法。）

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

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

而处理其他开发人员编写的外部库或包将需要更多的精力来调试，因此，一个好的工具如 Chrome Debugging

有时它来自于本机平台本身，因此搜索本机问题肯定会有所帮助。

希望这可以帮助某人。

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

adb logcat *:S ReactNative:V ReactNativeJS:V

在终端中运行此Android日志。

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

如果使用它，请不要忘记在模拟器中启用“远程调试JS”。

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

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

确保您有铬。

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

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

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

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

1. 在模拟器中运行您的应用-react-native run-ios
2. 按ctrl + d并单击“远程调试JS”

1. 网页应在http：// localhost：8081 / debugger-ui处打开，如果未输入URL并转到Chrome中的此链接
2. 右键单击页面，然后单击“检查”，它将打开用于chrome的开发人员工具

3. 转到顶部菜单中的源代码，并在右侧文件浏览器中找到您的js类文件

4. 您可以在视图中放置断点并在其中调试代码，如在镜像中所见。

默认情况下，我的ios模拟器不接受按键操作，这就是cmd-D无法正常工作的原因。我必须使用模拟器的菜单打开键盘的设置：

硬件>键盘>连接键盘

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

对于android应用程序。按Ctrl + M远程选择debug js，它将在chrome中打开一个新窗口，网址为http：// localhost：8081 / debugger-ui。您现在可以在Chrome浏览器中调试应用了

有在文件路径的空间防止了Cmd+ D从工作。我将项目移到没有空间的位置，终于使Chrome调试器正常工作。好像是个虫子。

如果要默认启用调试：

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

参考：启动默认启用“远程调试JS”的React Native应用

非常简单，只需两个命令

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

假设您想在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。

• 我希望这会有所帮助，对我有用。

如果您使用的是Redux，我强烈建议您使用React Native Debugger。它包括Chrome开发者工具，也有Redux开发者工具和React开发者工具。

Redux Devtools：这使您可以查看您的操作，并在它们之间来回移动。它还允许您查看您的redux存储，并具有自动将每个操作的前一状态与更新后的状态进行区分的功能，因此您可以在一系列操作中来回移动时看到该状态。

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

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

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

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

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

反应本机调试器

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

chrome开发人员工具

1. 如果您使用模拟器，请使用Ctrl+ M＆模拟器Cmd+D

2. 点击-远程调试js

3. Google Chrome浏览器进入控制台

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

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

去看看真的很有用。;）

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

• 要在IOS中调试

cmd + d

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

• 在android中调试

触摸设备（确保您的开发人员选项已启用）

步骤1： 将debugger您想要停止脚本的位置放在任何地方，例如：

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

当控制权移到该代码块时，这将暂停调试器。

步骤2：Cmd+D在ios模拟器和Android模拟器Cmd+M上 按。如果您拥有真正的设备，请摇动设备以打开开发菜单，如果您不想摇动设备，请关注此博客

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

步骤4： 选择Developer Tools.

第5步：Sources无论您debugger在代码中写过什么， 调试器都会在选项卡中暂停。转到控制台，然后键入要调试的任何参数（代码块中存在），例如： 要移至下一个调试器点，请再次移至Sources->单击Resume script执行按钮（右上角的蓝色按钮）。

将调试器放置在您想暂停脚本的任何位置。

享受调试！

您可以使用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

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

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

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

然后打开您的检查器[f12]，然后进入控制台选项卡对其进行调试！:)

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

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

从RN 0.62（请参阅此链接）开始，使用默认项目初始化Flipper。

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

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

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

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

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