Local Server or Domain Chrome Mobile Debugging with Port Forwarding

Question

I'm trying to setup Chrome mobile debugging using an Android phone and a USB connection.

I have managed to get the device available in chrome://inspect/#devices and can inspect remote sites e.g. www.google.com, etc.

However, I would like to test a local site/app running on a local server e.g. http://my-local-server, etc. I tried the port-forwarding feature, but I can only access localhost, not a local domain.

Am I able to do this without the somewhat complicated Proxy/Wi-fi setup?

Answer 1

I managed to find a solution.

Before you attempt this, setup port forwarding for Chrome mobile debugging and keep track of the ports. Let's call them:

• Port 1: the listening port on the device e.g. 6040
• Port 2: the listening port on the local machine e.g. 8090

Steps:

1. Install Node.JS (if you don't have it)
2. Create a file called proxy.js in a directory of your choice
3. Copy the contents of the code from this gist and paste into proxy.js
4. Run the following command in the terminal from said directory:

PORT_LISTEN=8090 PORT_TARGET=80 HOST_TARGET="my-local-server" HOST_ORIGIN="my-local-server" node proxy.js

What's happening is as follows:

• Chrome has already setup a port-forwarding setup from your device to localhost:8090
• By running the code above, you have created a proxy server to listen on port 8090 and forward to your local server at port 80. The HOST_ORIGIN indicates to the web server who the request is for i.e. my-local-server

localhost:6040 --> localhost:8090 --> my-local-server:80 

On your device, you should now be able to visit http://localhost:6040 and see your local server/domain site.

Answer 2

Hi this is possible with Drony. Instructions to download and first configuration are in this answer https://stackoverflow.com/a/75214767/13720928.

Follow further directions here:

1. Select the network, then select Filter default value -> Direct all to direct all connections to where the're supposed to be requested
2. Add a filter rule. Type in your localhost custom name, such as mylocalsite.net.
3. Select Action -> Allow and click on save
4. In Log tab turn on Drony

Enjoy browsing while developing your app! Or develop your app while accessing both localhost and another api service.