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

【问题标题】：How to debug react native apps in visual studio code?如何在 Visual Studio 代码中调试反应本机应用程序？
【发布时间】：2018-08-03 06:03:21
【问题描述】：

我正在使用 Visual Studio Code IDE 开发 React Native 应用程序，而不是使用 expo 库。

在此之前，我在 android studio 中工作，在其中进行调试非常简单。

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

【问题讨论】：

使用reactotron或者使用chrome远程调试，你的代码编辑器是怎么参与进来的？
如果您想将调试器用作 vacode，请遵循此问题。 https://stackoverflow.com/questions/53626028/debug-react-native-using-vscode-debugger

标签： reactjs react-native react-native-android

【解决方案1】：

如果您想在 VS Code 中调试应用程序，就像在其他 IDE 中一样。那么在方法上可以按照以下步骤进行：

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

这是对 VS Code 的 React Native 功能的一个很好的补充。

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

如果它最初显示No Configuration，那么您可以单击添加配置，然后选择 React Native 选项。

现在如果已经添加了Launch configuration，那么您可以点击添加配置按钮，您将看到更多与 React Native 相关的选项。

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

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

然后在模拟器或设备上打开开发者选项（Ctrl + M for Windows + Android）并点击Debug JS Remotely。

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

【讨论】：

当我点击 Debug JS Remotely 时，它总是会打开一个新的 chrome 标签。另外，当我添加一个新的launch.json 并选择React Native: Attach to packager 并运行它时，什么也没有发生。我已经在终端中启动了npm start。
@CyberMew 不确定是什么，但会出错。
是的，我尝试调用“React Native: Start Packager”，但我收到了关于错误工作区的警告。不记得我做了什么（可能重新安装了 React Native Tools 并重新启动），现在效果很好！
@CyberMew 我知道你说过你不记得你是如何解决问题的，那是 两年前 哈哈，但我希望你知道我是如何解决的可以解决相同的问题（即 Chrome 妨碍了 RNT）。我可以通过恰到好处的时间来偶尔让它工作，但是 9/10 次，当我在手机上重新加载我的应用程序时，我得到 a) Chrome 将焦点从 VS Code 上偷走和 b) 真正的 PO'编辑说 Chrome 正在占用端口并阻止 React Native Tools 连接。总而言之：知道如何告诉 Chrome $#@！关闭，因为我从来没有要求它参与？！大都会！ :D
@Kenny83 很抱歉回复晚了，但是当我遇到这个问题时，我确保 Chrome 中的调试器页面已关闭（我总是在某个地方打开它，哈哈），所以 Chrome 选项卡没有捕获它而不是 React Native Debugger。

【解决方案2】：

步骤 1：通过摇动手机或在您的机器中输入此命令（如果您正在运行 android），在您的手机中打开应用设置。

adb shell input keyevent 82

Step2：选择Debug JS Remotely，这是第二个选项。第三步：在浏览器中输入网址http://localhost:8081/debugger-ui/ Step4：再次通过摇动或运行步骤1中显示的命令打开App Setting，然后选择Reload选项，这是第一个选项

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

【讨论】：