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

Live reloading react-native makes it super easy to see your changes with the ⌘ + R keys or even just enable live reload and watchman will "refresh" the simulator with the latest changes. If you get an error, you can get a clue from the line number from that red screen. A couple of undo will get you back to working state and start again. console.log('yeah, seriously.') I find myself prefer letting the program run and logging some informations than adding a debugger break point. (tough debugger is useful when trying to work with external packages/libraries and it comes with autocompletion, so you know what other methods you can utilise.) Enable Chrome Debugging with debugger; break point in your program.

这取决于您遇到的错误类型以及您对如何调试的偏好。对于大多数未定义的不是一个对象(评估'something.something')，方法1和2对我来说已经足够好了。

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

有时它来自react-native平台本身，所以谷歌一下react-native问题肯定会有帮助。

希望这能帮助到一些人。

假设你想在Android模拟器上显示这个菜单

然后，尝试⌘+m在Mac上的Android模拟器上弹出这个开发设置对话框。 如果没有显示，那么转到AVD >(点击笔编辑模拟器配置)>高级设置>检查启用键盘输入框。 然后重试⌘+m。 如果它没有显示静止，那么去运行模拟器设置和发送键盘快捷键到组合框/下拉菜单，然后选择模拟器控件(默认)选项。

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

调试React原生应用程序

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

在iOS模拟器中运行应用程序。 按Command + D，打开一个网页http://localhost:8081/debugger-ui。(Chrome只现在)或使用摇手势 为更好的调试体验启用暂停捕获异常。 按命令+选项+ I打开Chrome开发工具，或通过视图->开发人员->开发人员工具打开。 现在您应该能够像往常一样进行调试了。

可选

为谷歌Chrome安装React开发人员工具扩展。当开发人员工具打开时，如果你选择React选项卡，这将允许你在视图层次结构中导航。

生活重新加载

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

在iOS模拟器中运行应用程序。 按Control + Command + Z键。 您现在将看到启用/禁用Live Reload，重新加载和启用/禁用调试选项。

对于Android: Ctrl + M(模拟器)或摇动手机(在设备中)显示菜单。

对于iOS: Cmd + D或摇晃手机显示菜单

确保你有铬。

在显示的菜单上选择Debug JS远程选项。

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

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

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

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

之后你可能会看到这样的React本机调试器页面。

然后打开你的检查器[f12]，去控制台选项卡调试它!：）

如果你正在使用Redux，我强烈推荐React Native Debugger。它包括Chrome开发工具，但也有Redux开发工具和React开发工具。

Redux Devtools:这允许你查看你的操作，并在它们之间来回切换。它还允许您查看redux存储，并具有自动区分每个操作的先前状态和更新状态的功能，因此当您在一系列操作中来回执行时，您可以看到这一点。

React Devtools:这允许你检查某个组件，即它的所有道具以及它的组件状态。如果你有一个组件状态的布尔值，它让你点击它来切换它，看看当它改变时你的应用程序是如何反应的。很棒的特性。

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

总之，把这些都放在一个地方真是太棒了!如果你不需要其中一个，你可以打开/关闭它。获得React本机调试器并享受生活。