如何从IDE在移动chrome上运行Flutter Web



我的目标是拥有"chrome on android";作为Intellij中的可选运行/调试配置

我正在寻找一种在我的安卓手机浏览器上运行我的flutter网络应用程序的方法。我相信这可以通过Intellij中的自定义运行配置来实现,该配置使用adb和chrome devtools远程连接的组合。

澄清:这应该是免提的,所有的答案都有共同点,我必须手动打开网址,但我正在寻找一种方法"启动";手机上的url,就像我们可以在chrome中为桌面启动一个网络应用程序一样。

我知道这是可能的,让网络应用程序在连接的设备上运行-我正在寻找的是一个运行配置,以自动启动网络服务器,复制url推送到设备,然后在那里打开url

如果只想调试,可以使用

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

则访问http://>您的ip>:8080

**您还应该确保您的端口(8080(是打开的。

您可以使用端口反转来完成此操作,它基本上将您的本地主机端口请求重定向到您的笔记本电脑本地主机端口。

因此,当您使用flutter run -d web-server运行flutter web应用程序时,您将看到您的web应用程序在localhost上提供服务,例如http://localhost:49403

  • 将手机连接到设备
  • 运行adb reverse tcp:49403 tcp:49403
  • 现在,你只需在手机浏览器中输入地址,就可以看到应用程序正在运行

因此,当您运行adb反向命令时,手机本地端口49403将路由到笔记本电脑的端口49403。您将能够在手机浏览器中看到您的应用程序正在运行。

运行应用程序时,您将获得本地主机URL。我通常在我的iOS模拟器safari浏览器中使用此URL。也可以在Android上尝试一下。

我终于用一个小bash/expect脚本解决了这个问题。

你需要在你的系统上安装预期,大多数系统都是预装的。

快速解释:启动进程并等待它启动并运行,然后建立反向tcp连接并通过adb推送URL(这是迄今为止缺失的关键步骤(。然后,脚本将控制权交还给用户,这样你就可以像习惯的那样使用r/r/q——这甚至可以与Intellij/VSCode一起使用,但自从我切换到vim/tmux进行开发以来,我还没有尝试过。

#!/usr/bin/expect -f
set timeout -1

spawn sh -i -c {
flutter run -d web-server --web-port 49403
}
set run_id $spawn_id
expect "For a more detailed help message, press "h". To quit, press "q"."
spawn sh -c {
adb reverse tcp:49403 tcp:49403
adb shell am start -a android.intent.action.VIEW -d http://localhost:49403
}
interact -i $run_id

我建议将您的物理设备设置为";从不睡觉";模式,因为必须解锁设备才能工作。

最新更新