Using Chrome Dev Tools in VirtualBox to Debug Mobile Website Over USB

The title here is a mouthful, but I can boil this down to what I am trying to do.

Goal: To access an Apache2 virtual server, on a VirtualBox with a Windows 8 host and Ubuntu 13 guest. I want to access this server from my mobile Android device (Galaxy Note 3) over my LAN, so I can debug it live over USB using Chrome Dev Tools.

Basically, I’m excited to try building a new site on the Laravel PHP framework using Twitter Bootstrap, and I want to check it’s mobile response during the development phase on my cell phone. I know there are emulators I can run to do this, but why not?

Due to the string of words thrown together to make the title of this posting, I need to make some assumptions so I can actually finish this article within a reasonable amount of time.  First, I need to assume you can already get a VirtualBox fired up, regardless of the host. I’m running Ubuntu within my VirtualBox, and that’s not very relevant to the purpose here either. Within this VirtualBox, I have installed a LAMP stack for my development needs.

I’m going to assume you already know how to setup a Virtual Host with Apache 2.4.6 by creating .conf files in your /etc/apache2/site-available folder. Then you enable them with the a2ensite command, and restart your server. If you’re not sure, google some of those buzz words I just dropped.

For sake of brevity,  my setup is a minimal webapp  installation on the VirtualBox in the /var/www/planblocks.com folder.  I have modified my /etc/hosts file and /etc/Apache2/sites-available/planblocks.com.conf to redirect the local planblocks.com url request to this folder. Again, I am assuming you can find out how to do this on your own.

Now the first thing I wanted to do was make sure that I could get the VirtualBox to see my Android Galaxy Note 3 when I plugged it in to the USB port. (Note: At the time of this writing, apparently VirtualBox does not support USB 3.0.  I just made just I was using a USB 2.0 port.) From within my VirtualBox, I pulled up the VM menu and looked for USB devices to share. I found my phone on the list, and selected the device.

However, now when I go to locate the phone from within the VirtualBox, it’s no where to be found. The plug-and-play feature from Windows 8 captured the device, and doesn’t pass it through to the Ubuntu VM apparently. Sure enough, Win8 still sees it.

Jumping back over to my Host desktop, I can see my phone is recognized by the machine. Just not the Virtual Machine.

A quick little search on the web tells me that I need to put a filter on the phone. The VirtualBox will filter the phone from the host machine so that I can grab it on the Ubuntu VM.

The filter can be found in the settings area of  the VirtualBox for USB devices. By going in to this area, I can find my device and easily apply the filter to it.

At least that is what I found online while trying to do this. However, while writing this post I was able to get the VM to recognize the device without even installing a filter.  You can see here the device is listed in my Folder list without being filtered. After further trials, the Windows machine and Ubuntu VM seemed to fight for control of the device back and forth. So I did go back and enable it.

If you find yourself needing to enable a filter, it’s still rather easy to do. Just go find the USB settings in your VB, and while the device is plugged in you can enable a filter on it.

Here you can see how the filter is applied  on the virtual machine. I do believe this is a requirement, or at least it prevents the struggle between host and guest.

I’m going to continue on with it enabled, just to avoid conflicts. But now that my VM can see my phone over USB, I need to tell my phone to see my VM. This is going to be different with all Android phones, so here is a link on Google Dev Tools that I used to open up my phone for debugging. It depends on your version of Android, but oddly enough I had to hit my “Build Number” in the “About Phone” menu 7 times to unlock it. There may be some other nuances in there related to specific phones, but the tutorial there is brief and it got me up and running.

Okay, so far we have a Virtual Server running on our Virtual Machine inside of a host Windows 8 box that is connected to an Android device by a USB cable. The next step is to find the Virtual Machine from the mobile device on the local network. In order to do this, I had to modify my connection on the Ubuntu VM from within VirtualBox. The default setting is a NAT connection which allows my guest VM to share my host’s local IP address. To access the specific server on my VM, I want to give the VM it’s own local IP. This can be completed by changing the network connection to “Bridged Adapter”.

I have a local ethernet cable connected to my laptop so it shows that here in my configuration. This will work over WiFi too so it doesn’t matter if your settings don’t match mine. However, what’s important is that we now have a specific IP address for the virtual machine on the LAN. I found my local IP by checking my router’s configuration, but you can also find it from within the VM’s terminal.

A simple call to ifconfig from the command line will give you the local LAN IP needed to access your VM from within your network.  All you need to do now is edit your /etc/hosts file on your VM to recognize this IP and redirect it to where you want it to go. So get out your favorite text editor, and review your hosts configuration. Here is what my config looks like to redirect a call from my LAN to a Virtual Host on my Virtual Machine. Specifically, it’s the 192.168.1.32 redirect handling the request.

So because I configured a Virtual host file for planblocks.com, I can access it from my localhost IP, or the LAN IP because of this /etc/hosts file.

Now I just need to go in to Google Chrome and find my device.  The link I used to do this is from within my VM is at chrome://inspect/devices. Making sure that I am in debugging mode, I expect to see the Dev Tools find my Android phone. I also want to make sure that I recognize the VM attempting to connect to my Android phone by allowing the USB debugging connection.

And the Dev Tools do find my phone.  With the most current versions of Chrome running, I can see the open tabs on my Android device in my VM’s browser window.

By clicking on an open tab from within the virtual machine, a Dev Tools window opens on my VM and the web site opens on the Android device. Now I can debug it live as if it’s all happening just on a host machine.

 As I scroll the mouse over the debugger, I see it follow along in real time right on the mobile device.  What I’ve done here may be a little bit of an overkill with the availability of emulators, but I wanted to show how this is done to provide real mobility testing.

As I wrote this post, I’ve also considered the idea of creating a full DEV environment on a Raspberry Pi.  Basically the same concept can be done as I have emulated here. With a Win 8 host box, I sometimes prefer the VM for development on web sites especially for accessing tools like composer, node.js and the laravel artisan tool.  While available in Windows, I prefer the LAMP support.