如何在 Visual Studio Code 中调试 React Native 应用？

Question

我正在使用Visual Studio Code IDE开发React Native应用程序，没有使用Expo库。

在此之前，我一直在使用Android Studio，其中的调试非常简单直观。

现在，对于React Native，我想知道如何使用Visual Studio Code IDE调试我的应用程序？

- Anand S

---

使用Reactotron或通过Chrome远程调试，你的代码编辑器在这里扮演了什么角色？ - Harkirat Saluja

如果您想要像vacode一样的调试器，请参考此问题。 https://stackoverflow.com/questions/53626028/debug-react-native-using-vscode-debugger - Uditha Prasad

Answer 1

如果您想在VS Code中调试应用程序，就像在其他IDE中一样。那么一个方法是遵循以下步骤：

1. 在VS Code中安装React Native Tools扩展（由Microsoft提供）。

这是对于React Native而言，VS Code功能的不错补充。

2. 然后从左侧菜单中选择Debug选项，点击Add Configuration按钮。

如果一开始它显示No Configuration，那么您可以点击Add Configuration按钮，然后选择React Native选项。

3. 现在如果已经添加了Launch configuration，则可以点击Add Configuration按钮，然后会看到更多与React Native相关的选项。

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

4. 接下来在代码中添加您的断点。假设您的应用程序已在模拟器上运行，则可以选择 Attach to Packager 选项。

5. 然后在模拟器或设备上打开开发者选项（Windows + Android 的快捷键是 Ctrl + M），并单击 Debug JS Remotely。

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

- gprathour

---

当我点击“Debug JS Remotely”时，它总是打开一个新的Chrome标签。此外，当我添加一个新的“launch.json”并选择“React Native: Attach to packager”，然后运行它，什么也不会发生。我已经在终端中启动了“npm start”。 - CyberMew

@CyberMew 不确定是什么，但肯定有些问题。 - gprathour

是的，我尝试调用“React Native: Start Packager”，但收到了有关错误工作区的警告。我记不清我做了什么（也许重新安装了React Native工具并重新启动），现在它运行得非常好！ - CyberMew

@CyberMew，我知道你说你不记得两年前是怎么解决你的问题的，哈哈，但我希望你能知道我如何解决同样的问题（即Chrome妨碍RNT）。我可以通过恰当的时间控制偶尔让它工作，但十次中有九次，当我重新加载我的手机应用程序时，我会感到烦恼，因为Chrome抢走了VS Code的焦点，并且Chrome正在占用端口并阻止React Native Tools连接。所以总之：有什么办法告诉Chrome离开，因为我从未要求它参与？谢谢！:D - Kenny83

@Kenny83 抱歉回复晚了，但当我遇到这个问题时，我确保 Chrome 中的调试器页面已关闭（我总是在某个地方打开它），这样 Chrome 标签页就不会捕获它，而是使用 React Native Debugger。 - CyberMew

@CyberMew 谢谢你，但我在你回复之前就自己解决了我的问题，顺便说一下，我的问题似乎与你的有些不同。但无论如何，还是感谢你抽出时间来回复 :-) - Kenny83

Answer 2

步骤1：如果您正在运行Android系统，可以通过摇动手机或在机器上输入此命令来打开移动设备中的应用程序设置。

adb shell input keyevent 82

步骤2：选择第二个选项Debug JS Remotely。

步骤3：在您的浏览器中输入网址http://localhost:8081/debugger-ui/。

步骤4：再次通过摇晃或运行步骤1中显示的命令打开应用程序设置，并选择第一个选项Reload。

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

- Anand S