如何 运行 Flutter Web on mobile chrome from IDE
How to run Flutter Web on mobile chrome from IDE
我的目标是将“chrome on android”作为 Intellij 中的可选 run/debug 配置。
我正在寻找在 android phone 浏览器上 运行 我的 flutter web 应用程序的方法。我相信这可以通过结合使用 adb 和 chrome devtools 远程连接在 Intellij 中自定义 运行 配置来实现。
澄清：这应该是免提的，所有答案都有共同点，我必须手动打开 url，但我正在寻找一种方法来“启动”url phone，就像我们可以在 chrome 中为桌面启动网络应用程序一样。
我知道有可能在连接的设备上获取网络应用程序 运行ning - 我正在寻找的是 运行 配置来自动执行启动网络服务器的步骤，复制 url 将其推送到设备，然后在那里 url 打开
当您 运行 您的应用程序时，您将获得一个本地主机 URL。我通常在我的 iOS 模拟器 safari 浏览器中使用这个 URL。在 Android 上也试一试。
如果你只想调试，你可以使用
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 应用程序在本地主机上提供服务，例如 http://localhost:49403.
- 将您的 phone 连接到您的设备
- 运行
adb reverse tcp:49403 tcp:49403
- 现在您只需在 phone 的浏览器中输入地址即可查看应用程序 运行ning。
所以当你的 运行 adb reverse 命令 phones 本地端口 49403 将被路由到你的笔记本电脑的端口 49403。你将能够看到你的应用程序 运行在您的 phone 浏览器中。
我终于开始使用一些 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
我建议将您的物理设备设置为“永不休眠”模式，因为设备必须解锁才能工作。
我的目标是将“chrome on android”作为 Intellij 中的可选 run/debug 配置。
我正在寻找在 android phone 浏览器上 运行 我的 flutter web 应用程序的方法。我相信这可以通过结合使用 adb 和 chrome devtools 远程连接在 Intellij 中自定义 运行 配置来实现。
澄清：这应该是免提的，所有答案都有共同点，我必须手动打开 url，但我正在寻找一种方法来“启动”url phone，就像我们可以在 chrome 中为桌面启动网络应用程序一样。
我知道有可能在连接的设备上获取网络应用程序 运行ning - 我正在寻找的是 运行 配置来自动执行启动网络服务器的步骤，复制 url 将其推送到设备，然后在那里 url 打开
当您 运行 您的应用程序时，您将获得一个本地主机 URL。我通常在我的 iOS 模拟器 safari 浏览器中使用这个 URL。在 Android 上也试一试。
如果你只想调试，你可以使用
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 应用程序在本地主机上提供服务，例如 http://localhost:49403.
- 将您的 phone 连接到您的设备
- 运行
adb reverse tcp:49403 tcp:49403 - 现在您只需在 phone 的浏览器中输入地址即可查看应用程序 运行ning。
所以当你的 运行 adb reverse 命令 phones 本地端口 49403 将被路由到你的笔记本电脑的端口 49403。你将能够看到你的应用程序 运行在您的 phone 浏览器中。
我终于开始使用一些 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
我建议将您的物理设备设置为“永不休眠”模式，因为设备必须解锁才能工作。