Introduction

If you are developing a brand new project on your VirtualBox instance, it is very useful to use the developer tools and the device toolbar on Chrome (or the Responsive Design Mode on Safari).

But is of course much more useful to perform real tests on real devices.

The Remote Debugging Android Devices is a great opportunity for this.

In the rest of the article, I am assuming that:

• You are working on High Sierra;
• You are going to show your project on an Android 4.4+ device;
• You are running a Linux server (Ubuntu 17.10 in the example) on your VirtualBox instance;
• The development domain is mylocaldomain.local provided by an Apache2 instance.

Set up

The first part of the setup, required to detect the Android device, is perfectly described in the Remote Debugging Android Devices official guide.

To summarize:

1. Enable the Developer Options on your Android device;
2. From the revealed menu, select Enable USB Debugging;
3. Now, on your computer, open Chrome and its Developer Tools (generally ⌘ ⌥ I);
4. Then, in the same bar as “Console”, “Elements”, “Sources”, .. , on the right, click the  ⋮ symbol and select More tools > Remote devices.
5. Be sure to confirm the dialog on your phone to authorize the computer to perform this action.

Custom domain / Virtual hosts configuration

In my case, I had to comment out everything else that was pointing to my custom domain in the /etc/hosts file, both in the host and guest machine, otherwise a random domain pointing to my 127.0.0.1 address was selected.
So the /etc/hosts looks like:

127.0.0.1 localhost 127.0.0.1 mylocaldomain.local

Just to be sure, I have a2dissited all the other virtual hosts, too, from the Apache enabled sites..but you can try without this step.

“Server” Port forwarding

The VirtualBox port forwarding will contain something like a rule similar to the following one:

Name	Protocol	Host IP	Host Port	Guest IP	Guest Port
Apache	TCP		8080		80

“Client” Port forwarding

1. Go to the Settings menu and be sure Discover USB devices checkbox is enabled;
2. Now, add a rule in the (enabled) port forwarding section like the following one:
   

   localhost:4444

   mylocaldomain.local:8080

3. Go back to the device section.

Test

You can now type http://localhost:4444 on the New Tab section, and the website should be opened in your Android device.