无法使用端口转发在 Android 手机上调试 webapp答案

【问题标题】：Can not debug webapp on an Android phone using port-forwarding无法使用端口转发在 Android 手机上调试 webapp
【发布时间】：2020-10-14 05:29:39
【问题描述】：

我有一个从我的桌面提供的带有 Service Worker 的网络应用，我想在 Android 手机 (Pixel3) 上进行调试。
在桌面上，我使用 localhost 满足开发目的的安全连接 (https) 要求，并且页面显示为安全挂锁，并且服务人员正常工作 - 很好！。

在手机上，我可以浏览到桌面 IP 地址 (192.168.1.74)，网络应用程序加载并快速响应（尽管没有安全挂锁，正如预期的那样）。
但在手机上，我不能让安全挂锁出现。
我尝试了不同的方法，我描述了 here，包括 localhost，但之前在我的网络服务器中，我将 http://localhost 重定向到 https://localhost，根据其中一个 cmets here，这并不好。

所以现在，我删除了对 https 的重定向，一起禁用了 https 并且只使用 http://localhost

我按照here 的描述设置了端口转发。（就我而言：8081 -> localhost:80）

我可以通过 USB 数据线连接手机来调试网络应用，在 chrome://inspect/#devices 中为所需选项卡、Pixel 3 XL 设备选择检查，然后与 Chrome 上的页面交互手机并在桌面上查看更改。

当我在手机上的 Chrome 中打开标签并输入 localhost:8081 时，页面加载速度非常慢。大多数情况下它会因 ERR_CONNECTION_REFUSED 而失败，有时它会在很长一段时间后加载。
我将手机和桌面上的所有 Chrome 设置恢复为默认设置（例如禁用标志 chrome://flags/#allow-insecure-localhost、chrome://flags/#insecure origins treated as secure）

但我仍然无法让端口转发工作。

我为最终加载的页面收集了信息。

使用 Chrome 稳定版运行时，在“网络”选项卡中，加载登录页面的时间约为 2 分钟。悬停在 (Initiator) 列附近，我看到 chrome-error://chromewebdata/:1700（见图）

所以这可能是网络问题？

谢谢，
阿夫纳

桌面：Ubuntu 18.04，Chrome 版本 83.0.4103.61
Pixel 3 XL：Chrome：83.0.4103.106，Android 版本 10

【问题讨论】：

标签： android service-worker

【解决方案1】：

我无法使用端口转发。虽然它正在工作，但网络速度非常慢，使得这个选项无法使用。

我终于通过做以下事情解决了这个问题：

在网络服务器（nginx）配置文件中：
- 配置了一个不同于默认 80 的任意端口 (8079)
  
  cat nginx.conf 服务器 {
  监听 8079;
  监听 [::]:8079;
  ...
- 禁用 https 配置
- 禁用从 http 到 https 的重定向
在桌面上的 Chrome 中chrome://flags/
配置参数：Insecure origins treated as secure 和：http://192.168.1.74:8079
启用并重新启动 Chrome
在 Android 上的 Chrome 中
设置与桌面上的 Chrome 类似的设置并重新启动

完成后，我可以在我的 Android 手机上调试 Web 应用，并且注册、安装和使用 Service Worker。

【讨论】：