React-Native：如何在真正的 iOS 设备上使用“远程 JS 调试器”？

Question

我想知道在真实设备上是否也可以使用 react-native 的远程调试器模式。 但它通过一个错误页面说明阻止了我

“连接到http://localhost:8081/debugger-proxy?role=client超时”

这里有趣的事实是这个 URL 在我的开发者机器上也不起作用。

在运行 packager.js 的开发人员机器上的浏览器中打开此 URL ( http://localhost:8081/debugger-proxy?role=client ) 将响应：

无法 GET /debugger-proxy?role=client

当我关闭远程调试器时，一切都按预期工作。

重现步骤：

1. react-native init testapp
2. cd testapp/ios
3. 使用 XCode 打开 .xcodeproj-File
4. 选择我连接的 iPhone 作为目标设备
5. 运行应用程序

该应用程序将从我的本地机器获取源代码。 为了完成这项工作，iPhone 设备和我的 iMac 都连接到同一个 WiFi。

ReactNative-Application 按预期在 iPhone 上执行。 通过摇动手势，我会生成开发人员菜单并选择“远程调试 JS”选项。

现在这个错误出现如上所述。

根据在真实设备上运行的旁注，我在 RCTWebSocketExecutor.m 中将主机从本地主机更改为我的 Mac 的 IP 地址，但这会导致在获取时出现 endlos 循环。

问题是：

如何在真实设备上使用远程 JS 调试功能？

更新

经过进一步调查，我得出结论，这可能是一个错误，并在 GitHub 上打开了以下问题。

Answer 1

在chrome浏览器中，我已经改变了

本地主机：19001/debugger-ui

到

192.168.0.4:19001/调试器-ui

它奏效了。 将 192.168.0.4 替换为您的 IP 地址。

Answer 2

在 iOS 设备上，从react-native/Libraries/WebSocket/RCTWebSocketExecutor.m打开文件 RCTWebSocketExecutor.m 并将“localhost”更改为您计算机的 IP 地址， (don't forget the correct port. eg: 192.168.1.6::8880)然后从开发者菜单中选择“Debug JS Remotely”。

注意：从您的设备中删除该应用程序，关闭为创建 bundle.js 而打开的终端。 最后按下 Xcode 中的 Play 按钮。

这是来自 react-native 网站的官方指南：

Answer 3

我们在 2020 年遇到了类似的问题，现在有一个更好的解决方案，即直接从应用程序更新目标机器的 IP。 与计算机和设备在同一个 wifi 上 - 即使它们通过 USB 连接。

1. 摇晃手机获取菜单
2. 选择配置捆绑程序
3. 插入电脑IP
4. 按应用更改

现在您应该在计算机上获得调试数据。