React Native如何进行调试？

在Windows上，Android模拟器调试React Native应用程序时，请使用F10代替Cmd+M。模拟器将开始显示所有调试选项。

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

对于iOS：按下Cmd+D或摇晃手机以显示菜单。

确保您拥有Chrome浏览器。

在显示的菜单中选择“Debug JS Remotely”选项。

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

在那里，您可以查看被记录的日志，请展开控制台。

adb logcat *:S ReactNative:V ReactNativeJS:V

在终端中运行此命令以获取 Android 日志。

如果您正在使用Microsoft Visual Code，则安装React Native Tools扩展。然后，您可以通过单击所需行号来轻松添加断点。 按照以下步骤设置和调试应用程序： 如果您正在使用模拟器，请不要忘记启用“Debug JS Remotely”。

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

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

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

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

对我而言，在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'）

首先，在您的ios模拟器中，按下[command + D]键，您将看到此屏幕。

然后点击Debug JS remotely按钮。

接着您会看到类似这样的React Native Debugger页面。

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

如果您想默认启用调试：

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应用程序

针对Android应用：按下Ctrl+M选择远程调试JS，它会在Chrome中打开一个新窗口，网址为http://localhost:8081/debugger-ui。您现在可以在Chrome浏览器中调试应用程序。

默认情况下，我的iOS模拟器无法捕获键盘输入，这就是为什么cmd-D无法正常工作的原因。我必须打开模拟器菜单中键盘设置选项：

硬件 > 键盘 > 连接键盘

现在，cmd-D可以启动Chrome调试了。