如何在IDE中从移动端Chrome运行Flutter Web
如何在IDE中从移动端Chrome运行Flutter Web
我的目标是在Intellij中将“chrome on android”作为可选择的运行/调试配置。我正在寻找一种方法在我的安卓手机浏览器上运行我的Flutter Web应用程序。我相信可以通过在Intellij中使用adb和chrome devtools远程连接的自定义运行配置来实现这一目标。澄清一下：这应该是无需操作的，所有答案都有一个共同点，就是我必须手动打开URL，但我正在寻找一种像在桌面上的Chrome浏览器中启动Web应用程序一样的方式来“启动”手机上的URL。我知道可以在连接的设备上运行Web应用程序，但我正在寻找一种运行配置来自动化启动Web服务器、复制URL、将其推送到设备上，然后在设备上打开URL的步骤。
问题原因：在运行Flutter Web应用程序时，无法从IDE直接在移动Chrome浏览器上运行。
解决方法：
1. 使用端口转发进行操作，将本地主机端口请求重定向到笔记本电脑的本地主机端口。
2. 运行flutter run -d web-server命令来启动Flutter Web应用程序，此时应用程序将在本地主机上提供，例如http://localhost:49403。
3. 将手机连接到设备上。
4. 运行adb reverse tcp:49403 tcp:49403命令。
5. 现在，您只需要在手机的浏览器中输入地址即可查看应用程序运行情况。
通过运行adb reverse命令，手机上的本地端口49403将被路由到笔记本电脑的端口49403，您将能够在手机的浏览器中看到应用程序正在运行。
问题的原因是需要在移动端Chrome上运行Flutter Web时，需要调试和测试PWA行为，但只能在模拟器上进行调试，而无法在真机上运行。
解决方法是使用以下命令在模拟器上运行Flutter Web：
flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0
然后通过访问http://>你的IP>:8080来调试和测试。
另外，需要确保端口8080是开放的。如果你的电脑IP无法正常工作，可以尝试使用10.0.2.2来代替。
这个方法只适用于调试，无法在真机上运行Flutter Web。但是，对于需要测试PWA行为并模拟移动设备屏幕大小的情况，这是一个可行的解决方案。