无法使用端口转发在 Android 手机上调试 webapp [英] Can not debug webapp on an Android phone using port-forwarding

问题描述

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

在电话上，我可以浏览到桌面 IP 地址 (192.168.1.74)，并且网络应用加载并快速响应(尽管没有安全挂锁，正如预期的那样).
但在电话上，我无法显示安全挂锁.
我尝试了我在

所以这可能是网络问题?

谢谢，
阿夫纳

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

解决方案

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

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

• 在 Web 服务器 (nginx) 配置文件中:

  • 配置了一个与默认 80 不同的任意端口 (8079)

    cat nginx.conf server {
    监听 8079;
    监听 [::]:8079;
    ...

  • 禁用 https 配置

  • 禁止从 http 重定向到 https

• 在桌面上的 Chrome 中 chrome://flags/
  配置参数:Insecure origins夹为安全:http://192.168.1.74:8079
  启用并重新启动 Chrome

• 在 Android 上的 Chrome 中
  在桌面上设置与 Chrome 类似的设置并重新启动

完成后，我可以从我的 Android 手机调试 Web 应用程序，并注册、安装和使用 Service Worker.

I have a web app with service worker that is served from my Desktop, and I want to debug on an Android phone (Pixel3).
On the desktop I'm using localhost which satisfies the secured connection (https) requirement for development purposes, and the page shows up with the secured padlock, and the service worker works correctly - good!.

On the phone I can browse to the Desktop IP address (192.168.1.74) and the web app loads and responds fast (although without secure padlock, as expected).
But on the phone, I cannot get the secured padlock to show up.
I tried different approaches which I described here including localhost, but previously in my webserver I had http://localhost redirected to https://localhost, which is not good according to one of the comments here.

So now, I removed the redirection to https, disabled https alltogether and only work with http://localhost

I set up port-forwarding as described here. (In my case: 8081 -> localhost:80)

I can debug the web app by connecting the phone via USB cable, selecting inspect for the required tab, for the Pixel 3 XL device, in chrome://inspect/#devices, and interact with the page on Chrome on the phone and see the changes on the Desktop.

When I open the tab in Chrome on the phone and type localhost:8081, the page loads extremely slow. Most of the times it fails with ERR_CONNECTION_REFUSED, and sometimes it loads after long time.
I reverted all Chrome settings on the phone and on Desktop to the default (e.g. disabled the flags chrome://flags/#allow-insecure-localhost, chrome://flags/#insecure origins treated as secure)

But I still can't get the port-forwarding to work.

---

I collected information for a page that finally loaded.

When running with Chrome Stable, in the Network tab, the time to load the login page is ~2 min. Hovering near the (Initiator) column, I see chrome-error://chromewebdata/:1700 (see image)

So this may be a networking problem?

Thanks,
Avner

Desktop: Ubuntu 18.04, Chrome Version 83.0.4103.61
Pixel 3 XL: Chrome: 83.0.4103.106, Android version 10

解决方案

I was not able to use port-forwarding. Although it was working the network is extremely slow making this unusable option.

I finally solved the problem by doing the following things:

• in the web server (nginx) config file:

  • configured an arbitrary port (8079) which is different than the default 80

    cat nginx.conf server {
    listen 8079;
    listen [::]:8079;
    ...

  • disabled https configuration

  • disabled redirect from http to https

• in Chrome on the Desktop in chrome://flags/
  Configured the parameter: Insecure origins treated as secure with: http://192.168.1.74:8079
  Enabled and relaunched Chrome

• in Chrome on the Android
  set similar settings as for Chrome on the Desktop and relaunched

After doing that I can debug the web app from my Android phone, and the service worker is registered, installed, and used.

这篇关于无法使用端口转发在 Android 手机上调试 webapp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！