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.
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.
Requirements – HTTP proxy server application software installed on the host computer.
Lookup the IPv4 local IP address of the dev environment host computer.
# 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.
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.
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.
chrome://inspectto inspect with Chrome Developer Tools.