如何在Visual Studio代码中调试React本机应用程序？

Question

我正在使用Visual Studio代码IDE来开发React本机应用程序，而不是在使用EXPO库。

在我从事android studio工作之前，调试非常简单明了。

现在要进行本机操作，我想知道如何使用Visual Studio代码IDE调试我的应用程序？

Answer 1

第1步：通过摇动手机或在计算机中键入此命令来打开手机中的应用程序设置。

adb shell input keyevent 82

Step2：选择远程调试JS ，这是第二个选项 步骤3：在浏览器中，输入网址http://localhost:8081/debugger-ui/ 步骤4：再次通过摇动或运行步骤1中显示的命令来打开“应用设置”，然后选择 Reload 选项（第一个选项）

现在，您可以在浏览器中获取所有控制台日志，还可以通过放置断点并逐步分析值来远程调试应用程序。

Answer 2

与其他IDE一样，如果要使用VS Code本身调试应用程序。然后可以采取以下步骤：

1. 将React Native Tools扩展名（由Microsoft提供）安装到VS Code。

这是VS Code对React Native的强大补充。

1. 然后从左侧菜单转到“调试”选项，然后单击“添加配置”。

如果最初显示为No Configuration，则可以单击“添加配置”，然后选择“ React Native”选项。

1. 现在，如果已经添加了Launch configuration，则可以单击“添加配置”按钮，然后您将看到更多与React Native相关的选项。

您可以在React Native: Attach to Packager文件中为React Native: Debug to Android，React Native: Debug to iOS，launch.json添加配置。它位于.vscode文件夹中。

1. 然后在代码中添加断点。现在假设您已经在模拟器上运行了您的应用程序，那么您可以选择选项Attach to Packager。

1. 然后在模拟器或设备上打开开发人员选项（对于Windows + Android，为Ctrl + M），然后单击Debug JS Remotely。

现在您的断点应该可以正常工作了。同样，如果您的应用尚未运行，则可以相应地使用Debug Android或Debug iOS。