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

Posted 2023-02-23

【中文标题】如何从 IDE 在移动 chrome 上运行 Flutter Web

【英文标题】：How to run Flutter Web on mobile chrome from IDE

【发布时间】：2021-03-09 11:45:32

【问题描述】：

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

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

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

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

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

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

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

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

** 你也应该确保你的端口（8080）是开放的。

【参考方案3】：

您可以使用端口反转来做到这一点，它基本上将您的本地主机端口请求重定向到您的笔记本电脑本地主机端口。

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

将手机连接到设备 运行adb reverse tcp:49403 tcp:49403 现在您只需在手机浏览器中输入地址即可查看应用运行情况。

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

【参考方案4】：

我终于开始使用一个小的 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

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