无法使用React Native调试器进行调试

Question

我按照readme文件的指示开始了一个项目（mcnamee/react-native-starter-kit）。我将我的firebase集成到应用程序中，但当我注册时，它卡在spinner上......尽管将电子邮件和密码保存到firebase，并且没有问题地登录。我想调试一下当我点击注册按钮时发生了什么，但是它不显示任何操作等，也不在react native debugger应用程序中。为什么react native debugger无法连接到我的应用程序？我该如何解决这个问题？

图片链接：

- beratuslu

Answer 1

你一次只能附加一个调试器。如果你正在使用网页浏览器中的调试器，那么你不能使用React Native调试器。

最简单的解决方法是在运行react-native run-ios之前确保React Native调试器已经运行，并且应该自动连接到React Native调试器。如果没有连接，你可以按cmd+d来连接调试器。

如果已经连接到网页浏览器的调试器，请按下模拟器上的cmd+d以打开菜单，禁用远程调试，关闭网页浏览器，启动React Native调试器，然后按下cmd+d并启用远程调试，这样就可以连接到React Native调试器。

关于控制台中的信息，两个调试选项都将提供相同的信息。如果你想要更详细地调试发生的情况，你需要使用IDE中内置的调试器，并逐行查看代码或放置一些良好的console.logs()。

- Andrew

---

我正在尝试查看哪些操作使用了哪些数据.. 我仍然无法看到这些操作。 - beratuslu

即使在运行“npm start”之前已经打开了RND，它也会直接在Chrome上打开调试器。 - beratuslu

@beratuslu，你能切换到RND吗？ - Andrew

我尝试了你说的方法，它可以自动启动Chrome并打开Web UI调试器。但是，我仍然无法在Redux Chrome插件中看到动作。 - beratuslu

你需要在 package.json 的 "scripts" 中添加 "postinstall": "rndebugger-open --expo"，然后运行 yarn run postinstall 再运行 expo start。 - David Jarrin

Answer 2

问题是RND在不同的端口打开。我从RND菜单中更改了端口，它就像预期的那样工作了。

- beratuslu

---

相同的修复方法对我也起作用了。请检查所使用的端口是否符合您的预期。我的端口突然从19001更改为19004。请将其包含在RN调试器配置文件的默认RN端口数组中。 - Tevon Strand-Brown

Answer 3

@beratuslu，你在评论中写道：

我尝试了你说的方法，它会自动启动Chrome并打开Web UI调试器。但是我仍然无法在Redux Chrome插件中看到操作。

这也是我的问题，经过超过10个工作小时的努力，我通过取消勾选“维护优先级”的小框来解决它。

因此，如果有人在按照文档中提到的所有配置进行配置后仍然尝试解决此问题，而默认调试器仍然自动启动而不是连接到React Native调试器，请按照以下步骤操作。

• 取消默认调试器界面中的 Maintain Priority 复选框
• 关闭默认调试器
• 在模拟器中按下 CTRL + M 并停止远程调试
• 在 React Native Debugger 窗口中按下 CTRL + T
• 输入您的调试器端口（在我的情况下为 19000）并点击确认
• 在您的 Android 模拟器中，再次启用远程调试（CTRL + M -> 开始远程调试）
• 现在它应该连接到 React Native 调试器而不是默认调试器界面

希望这对某些人节省时间，以便弄清为什么默认调试器每次都会启动而不是连接到 React Native 调试器。

- Abid Ali

Answer 4

@beratuslu 在评论中写道：

我尝试了你说的，它会自动启动 Chrome 并打开 Web UI 调试器。但是我仍然无法在 Redux Chrome 插件中看到操作。

你如何开始调试过程？可能是你尝试使用 Jetbrains 产品，比如 WebStorm 或 PHPStorm 开始调试。

如果是这种情况，你需要知道，这还不起作用。你需要手动启动 react-native-debugger （不通过 Jetbrains 软件），并且如果正在运行，只使用“运行”（在 Jetbrain 软件中）来启动 DEV-Build。

这样，如果带有DEV_Flag的应用程序正在运行，则会建立与react-native-debugger的连接。

如果您需要使用断点进行调试，则必须使用Chrome浏览器，但在那里您无法获得redux输出...而另一方面，您可以使用react-native-debugger支持它。

如果您想要看到jetbrain-debug与react-native-debugger配合工作，请随时为此问题投票：https://youtrack.jetbrains.com/issue/WEB-35251

- suther

Answer 5

• 首先运行你的项目：

  expo start

• 然后：

  去你的浏览器中输入以下网址：

http://localhost:19000/debugger-ui/

• 这样你就可以很好地进行调试。

- CodeForest