ObiHill
ObiHill

Reputation: 11886

Local Server or Domain Chrome Mobile Debugging with Port Forwarding

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?

Upvotes: 0

Views: 2481

Answers (2)

Iglesias Leonardo
Iglesias Leonardo

Reputation: 544

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 enter image description here
  2. Add a filter rule. Type in your localhost custom name, such as mylocalsite.net. enter image description here
  3. Select Action -> Allow and click on save enter image description here
  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.

Upvotes: 0

ObiHill
ObiHill

Reputation: 11886

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.

Upvotes: 0

Related Questions