Can not debug webapp on an Android phone using port-forwarding

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/62546857/can-not-debug-webapp-on-an-android-phone-using-port-forwarding