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。
【问题讨论】:
注意不要在同一设备上同时启用wifi
和wired
连接
@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开发及调试方案(真实项目,建议收藏)