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

Question

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

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

澄清：这应该是免提的，所有答案都有一个共同点，即我必须手动打开网址，但我正在寻找一种在手机上“启动”网址的方法，就像我们可以在桌面版 Chrome。

我知道它是可能的，让网络应用程序在连接的设备上运行 - 我正在寻找的是一个运行配置来自动启动网络服务器，复制网址将其推送到设备，然后打开网址的步骤那里

Answer 1

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

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

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

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

Answer 2

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

因此，当您使用

flutter run -d web-server

运行 Flutter Web 应用程序时，您将看到您的 Web 应用程序在本地主机上提供服务，例如

http://localhost:49403

。

• 将手机连接到您的设备
• 奔跑

  adb reverse tcp:49403 tcp:49403

• 现在您只需在手机浏览器中输入地址即可看到应用程序正在运行。

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

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

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

Answer 4

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

Answer 5

最简单的答案是正常运行你的 flutter web 应用程序。检查网页。单击位于检查图标旁边的切换设备工具栏图标。 Chrome 有多种手机和平板电脑模拟器可供选择。