When it comes to debugging issues on mobile, it can be a bit tricky, especially when you are dealing with security issues. You don’t want to deploy your code to a publicly accessible URL just so you can view it on your phone or tablet and see if the issue has been fixed. Consequently, if the issue hasn’t been fixed, another build will be needed, and in today’s day and age, application builds and deployment can take ages. However, thankfully, there are many workarounds to solve this dilemma. One instance I’ll explain is an Apache module.
The first step is to install and successfully run Apache from your computer. If you’re not already an expert at this, you can use XAMPP in order to complete this simple step. Once this is complete, you need to create a virtual host for the site in order for your mobile device to connect to this local host. Don’t know how to create a virtual host? Turn to my previous blog entry for more detailed instructions.
Connecting Apache and your virtual host
Now that you’ve got all the parts in place, let’s connect your virtual host and the Apache server.
- In your httpd.conf file, make sure that you uncomment the
mod_authz_host.somodule. This tells Apache to be aware of any incoming requests from the network.
- Next, make sure you have the words
Allow from allappearing inside your
<Directory>tags in your virtual host. This tells Apache to fulfill the request to your application to anyone on the network. If this is a security concern, you can say
Allow from xxxxxxxxxxxx, where
xxxxxxxxxxxxis the ip address of your mobile device. Refer to the documentation to see how you can add more complex filtering.
- Restart Apache.
Configuring your mobile device
In order to configure your Android and/or iOS device, you need to make sure that your development environment and your mobile device are connected to the same network.
For iOS devices:
- In Settings -> Wifi, tap your current wireless network.
- Scroll down to HTTP Proxy and select the Manual button.
- Under Server, enter your computer’s IP address. Under Port, enter whichever port your Apache installation is running from. We usually use a number like 80.
- After this, exit Settings. You should now be able to enter your development environment’s URL in your mobile browser.
For Android devices:
- In Settings -> Wifi, tap the network you are currently connected to. Hold the tap for a few second in order for the Modify Network screen to appear.
- Modify Network and check the Show Advanced Options box.
- Under Proxy Settings, select Manual.
- Under Hostname, enter your computer’s IP address. The port should be 80, or whichever port your Apache installation is running from.
- After this, tap Save. You should now be able to enter the URL to your development environment on your mobile browser.
And voilà! You should now be able to see your development environment on your mobile device so you can fix any bugs before actual deployment.