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

Question

我的目标是在 Intellij 中将“chrome on android”作为可选的运行/调试配置。

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

说明：这应该是免提的，所有答案都有一个共同点，即我必须手动打开网址，但我正在寻找一种在手机上“启动”网址的方法，就像我们可以在 chrome 中启动网络应用程序一样用于桌面。

我知道有可能让 webapp 在连接的设备上运行 - 我正在寻找的是一个运行配置来自动化启动 web 服务器的步骤，复制 url 将其推送到设备，然后在那里打开 url

Answer 1

如果您只想调试，您可以使用

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

然后访问http://>your-ip>:8080

** 您还应该确保您的端口（8080）已打开。

Answer 2

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

\n

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

\n

\n
• 将您的手机连接到您的设备
\n
• 跑步adb reverse tcp:49403 tcp:49403
\n
• 现在，您只需在手机浏览器中输入地址即可看到应用程序正在运行。
\n

\n

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

\n

Answer 3

我终于开始使用一些 bash/expect 脚本来解决这个问题。

您需要在系统上安装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

我建议将您的物理设备设置为“永不睡眠”模式，因为设备必须解锁才能正常工作。