React-Native:如何在真实的 iOS 设备上使用“Remote JS Debugger”?

Posted

技术标签:

【中文标题】React-Native:如何在真实的 iOS 设备上使用“Remote JS Debugger”?【英文标题】:React-Native: how to use "Remote JS Debugger" on real iOS-device? 【发布时间】: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。

【问题讨论】:

注意不要在同一设备上同时启用wifiwired连接 @PritishVaidya 你如何检查你是否启用了这些?我想禁用 wifi 并只启用有线连接,但我不知道该怎么做。 【参考方案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 按应用更改

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

【讨论】:

以上是关于React-Native:如何在真实的 iOS 设备上使用“Remote JS Debugger”?的主要内容,如果未能解决你的问题,请参考以下文章

部署由React-Native开发的android和IOS应用程序

如何在真实设备上打开 react-native 开发菜单

前端程序猿的天花板?react-native开发及调试方案(真实项目,建议收藏)

前端程序猿的天花板?react-native开发及调试方案(真实项目,建议收藏)

不使用 react-native 的 Expo 分支

在 React-Native 中将 RCTRootView 作为子视图添加到 rootViewController