If you do any web designing of web dev, then you know that these days you have to test across a multitude of different browsers, OS’s and devices. I mainly work with WordPress these days. I tend to develop locally on my MAC then copy everything to the customer’s web host. I use a tool called MAMP which allows me to run WordPress sites and everything that goes with it, locally. I have all the browsers know to man installed on my Mac Book Pro, plus several virtual PCs provided free by Microsoft, which I can test through different versions of IE. I use Virtual box from Oracle for this as it is nice and free. I then have the Apple SDK which has IOS Simulator where I can browse my local host out the box.
Then we come to the elephant in the room, Android. I have several times, been caught out by weird behaviour in Androids browsers which required some work to resolve. Even though I live in Asia most of the time and android phones are as cheap as chips here, I would prefer to do everything via my Mac. Enter Android Studio which has a emulator where you can run multiple flavours of Android. Great problem solved
Yeah not so much! The android devices you setup don’t work the same way as the IOS sim. When you browse localhost, the loopback is set for the virtual device rather than host machine they are running on. The Android Studio guys say you can look at your dev pc by using the ip 10.0.2.2 which works great, except for one little problem. If you are testing WordPress sites, and you are using MAMPs out of the box settings, then your WordPress site URL will be setup as something like this.
http://localhost:8888/<name of your site>
which will not work if you change the address to
http://10.0.2.2:8888/<name of your site>
So what do we do to solve this? Well after spending hours looking for a solution and coming up with nothing, because apparently I am only person in the world that whats to do this, I lucked upon an article which, with some slight modding, worked. Heres what you do.
Disclaimer, there may be a better way to do this, but I couldn’t find it and this works. If your Google powers are strong and you know a better way, please by all means leave it in the comments below.
- Fire up your Android device through AVD Manager
- Enable Developer tools on the device. If its a bulk standard version of Android got to Settings/System/About emulated device and click on the build number 7 times (yes thats right, 7 times. Its Google, they play quidditch for gods sake) You should then get message saying you are a Developer. This should already be there, but have read in some cases its no
- In the Dev menu which will also be under system, check Enable USB Debugging is enabled
- Ok switch over to your MAC and open the Chrome Browser (Oh by the way you need Chrome, if you don’t have it, derrr why the heck not)
- Rich click anywhere in the window and select Inspect to open up the Developer Tools
- Expand the bottom pane where there should be several Tabs Console, Whats’s New & Remote Devices. No prizes for guessing which one we need.
- On The Remote Devices tab, go to Settings on the left.
- You will see an option for Port Forwarding. Enable it then click on Add Rule button.
- In the Device port textfield on the left, enter the
localhostport number from which you want to be able to access the site . So assuming again you are using out of the box setting, we want to access the site from
localhost:8888you would enter
- In the Local address textfield on the right, enter the IP address or hostname on which your site is running on your development machine’s web server, followed by the port number. So in our case it would be
- Click Add
Thats it folks, on you android emulator, you should be able to browse to
http://localhost:8888/<name of your site>
Now there are few things to be aware of, it will only work whilst you have the Chrome Developer Tools open. If you close chrome, it will stop working. I did find that it remembered the rule I set up even after closing Chrome, you just have to leave it running whilst you are testing
As said in my disclaimer, there may be a better way to do the, if I find it, I will post it, but for now this solution allows you to at least test. Hope this helps. Peace peoples…