React Native如何进行调试？

要在React Native cli中激活调试器，请按照以下步骤进行操作：
在执行完以下步骤后，Metro将开始运行：

~ npm start 

在模拟器或设备上运行项目

~ npx react-native run-android

开始调试器，

~ adb shell input keyevent 82     //debugger command or shake the device to alternate to this command

按下出现在模拟器或设备上的调试按钮，启动调试器，然后...

~ npx react-native run-android     //to run the app because adb need this command to start debugger in browser

To Deactivate Debugger:-

~ adb shell input keyevent 82     //debugger command or shake the device to alternate to this command

在模拟器或设备上按下“停止调试”按钮，以停止调试器。

如果你想了解如何检查网络流量并理解本地UI视图层次结构，那么React Native更新版本提供了开发者工具来调试移动应用程序，同时还具有可扩展的插件API。

Flipper是一个非常好的开发者工具，用于调试移动应用程序。该工具已经随React Native 62一起发布。

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

Expo 允许 Web 开发人员通过仅编写 JavaScript 一次性构建适用于 iOS 和 Android 的真正本地应用程序。它是开源的、免费的，并且使用 React Native。

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

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

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

1. 在模拟器运行应用程序后，按菜单按钮，然后选择“Debug JS Remotely”或“Debug in Chrome”（这取决于所使用的模拟器）。您可以参考下图：emulator with steps image
2. 将出现一个新的Chrome标签页。您需要按下Ctrl + ⇧J来显示开发人员工具并开始跟踪调试步骤。查看此图像作为参考

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

你可以从brew安装React Native Debugger。它比Chrome中的调试器更加舒适易用。

这真的取决于我正在做什么。如果我正在进行UI更改或调试UI，我通常会打开实时和热重载，然后进行更改，然后立即得到反馈。如果是更技术性的问题，我会打开JS调试来查看应用程序的状态。但是由于在React Native中重新加载非常快，如果状态太混乱，我只需使用控制台记录日志。

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

React Native Debugger。它帮助我解决了90%的问题。

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

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

const TAG = 'APP_NAME+SCREEN_NAME';

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

这样，我就可以跟踪操作并查看日志语句来自哪里。