React-Native：如何在真实的 iOS 设备上使用“Remote JS Debugger”？答案

【问题标题】：React-Native: how to use "Remote JS Debugger" on real iOS-device?React-Native：如何在真实的 iOS 设备上使用“Remote JS Debugger”？
【发布时间】：2018-09-09 15:50:30
【问题描述】：

我想知道 react-native 的 Remote Debugger 模式是否也可以在真实设备上使用。但它让我停止了一个错误页面说明

"连接到http://localhost:8081/debugger-proxy?role=client 定时出”

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

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

无法获取 /debugger-proxy?role=client

当我关闭远程调试器时，一切正常。

重现步骤：

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

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

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

现在出现上面提到的这个错误。

按照running-on-real device 中的附注，我在 RCTWebSocketExecutor.m 中将主机从 localhost 更改为我的 Mac 的 IP 地址，但这会在获取时导致 endlos 循环。

问题是：

如何在真机上使用Remote JS Debugging-功能？

更新

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

【问题讨论】：

注意不要在同一设备上同时启用wifi和wired连接
@PritishVaidya 你如何检查你是否启用了这些？我想禁用 wifi 并只启用有线连接，但我不知道该怎么做。

标签： ios react-native

【解决方案1】：

在chrome浏览器中，我改了

localhost:19001/debugger-ui

到

192.168.0.4:19001/debugger-ui

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

【讨论】：

【解决方案2】：

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

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

这是来自 react-native 网站的 official guide：

【讨论】：

192.168.1.6:8880 不是 2 列，只有一个

【解决方案3】：

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

摇动手机获取菜单
选择配置捆绑器
插入电脑的IP
按应用更改

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

【讨论】：