Remote Device Dev Environment Access

PublishedJuly 2, 2017

There are various ways to connect a mobile device to the computer running the local development instance of your web application for testing and debugging. A proxy server and/or USB cable are popular options.

Proxy Server

This method is pretty reliable and does not limit you to using browser specific settings on either the host or remote. The host computer will need HTTP proxy server software installed for proxying requests and responses. Fiddler and Charles are popular choices for this.

Both listen on port :8888 by default.

Fiddler - Tools - Options Screen
Fiddler - Tools - Options

Charles - Proxy - Proxy Settings

Requirements - HTTP proxy server application software installed on the host computer.

Lookup the IPv4 local IP address of the dev environment host computer.

Command prompt

ipconfig /all

Terminal

# wifi
ipconfig getifaddr en1

# list 
ifconfig | grep inet

On a Mac, a quick way to get the local IP is by holding down the option key while clicking on the network icon in the system tray.

Device Settings

On the mobile device connected to the same Wi-Fi network as the host, modify the connection by entering the proxy server port and host computer local IP address.

Under Settings - Wi-Fi, long-press the connected network SSID, select modify network. Under the advanced options | proxy, select manual. For the Proxy hostname enter the host local IP address. Enter the proxy server port number and save.

Device - Network - Proxy Settings

Direct Connection with USB Cable

If you’re using Google’s Chrome browser on both the device and host. This resource covers how to use the browser developer tools to test and debug using a USB cable. I like using this method along with one of the proxy servers above - Dev Tools - Access Local Servers.

Requirements - Chrome 32 or later and USB drivers installed on the host computer. For Windows, check for the correct driver using Device Manager. Android 4.0 or later running Chrome for Android on the device with USB debugging enabled.

Use chrome://inspect to inspect with Chrome Developer Tools.

Resources

Mobile