Remote Debugging A Mobile Website

Published on 26 Jul 2012 at 6:20 pm.
Filed under Informative,Mobile.

During mobile web development you will have a time when your site looks off. Here we look at remote debugging tools to help fix your design.

Remote Debugging: Adobe Shadow

Adobe Shadow Connection Window.

Remote Debugging Tool: Adobe Shadow

Adobe Shadow is a remote debugging tool from Adobe that allows you to connect your Kindle Fire, iOS, or Android device to your computer. It is a pretty simple tool. It works even on my old iPod touch running iOS 4.2.1.

To get yourself up and running with Adobe Shadow you are going to need to install three pieces of software.

  1. Install Adobe Shadow for Mac OS X (10.6-10.7) or Windows 7. Adobe Shadow is not available for Windows XP.
  2. Install the Adobe Shadow client for iOS, Android, or Kindle Fire.
  3. Install the Shadow browser extension for  Google Chrome.

When Adobe Shadow is running any page loaded by Chrome on your desktop computer will also load on your mobile device. You can then use Weinre to create a remote connection between the device and Chrome’s built-in debugging tools. The debugging tools do basically the same as they do on desktop. You can make changes to the page that are instantly reflected on your mobile device. The only difference I’ve experienced is that messages logged to the console do not show during page load. I’ll take that flaw for the easy of development. I have saved weeks of mobile web development work once I started to use Adobe Shadow.

Remote Debugging: ChromeRemote Debugging Tool: Chrome Mobile

Remote debugging Chrome for Android is pretty simple once you have everything set up. Unfortunately this setup process is pretty long. You must first install the Android SDK. If you’re like me and like to download everything to make sure you’re covered for all situations then expect to wait a long time. I’d recommend starting it up either at the beginning of the day, or at the end of the day and let it run overnight.

Once you’ve installed everything you should update your PATH environment variable to include the Platform Tools found in the “platform-tools” folder in the SDK’s installation folder. This will allow you to easily run the Android Device Bridge (adb) from the command line without having to type the path over every time. Once completed you have finished the one-time steps necessary for remote debugging.

From here you should connect your Android device to your computer with a USB cable and launch Google Chrome for Android. From their open Settings and then select Advanced. On this screen you will select Developer tools and check the Enable USB Web debugging option. Your device is ready to send out remote debugging information.

On your desktop you are going to need to enable port forwarding so that you can receive information from your device. You can do that by issuing the following from the command line:

adb forward tcp:9222 localabstract:chrome_devtools_remote

Finally, launch Google Chrome and enter localhost:9222 into the address bar. You are then presented a series of thumbnails of the pages you can debug. Click on the thumbnail and then open Chrome’s Developer Tools to begin debugging your page.

That may seem like a lot at first but once you have installed the SDK and configured your path it is very simple to do the other steps. The only thing to remember is that you really should disconnect the USB cable and disable USB debugging in Chrome when you no longer need it. This type of debugging is a big drain on your battery.

Remote Debugging Tool: Firefox Mobile

I am just including this section for completeness. Remote debugging Firefox Mobile is similar to the Chrome debugging. The first difference is the command that you issue:

adb forward tcp:6000 tcp:6000

There should be code to enable remote debugging in Firefox 15. Firefox is on 14 at the time of this writing, but I have installed the pre-release copy of Firefox 17 and I cannot find this remote debugger for the life of me. I found the hidden preference that they say will make it show, but I’ve got no where. I’ve tried browsing to localhost:6000 like on Chrome, but that’s not it. If anyone figures that out please let me know.

Update: It seems Mozilla put together instructions now that Firefox 15 is close to completion. It will not need USB debugging as Firefox supports Wi-Fi debugging, though USB debugging is available for better security.

Remote Debugging Tool: Opera Dragonfly

Remote Debugging Tool: Opera DragonflyRemote debugging has been available with Opera Dragonfly since 2008. It is ridiculously simple. All you need to debug Opera Mobile is the desktop version of Opera. No third-party applications or SDK’s. On the desktop version you just need to go to Tools  and then Advanced and then Opera Dragonfly. Inside of Opera Dragonfly there is a button in the top right corner for Remote debug configuration. Click on it and it will ask you to specify a port to make available. The default port is 7001. This is good enough for most people.

From there you move to your mobile device. Inside of Opera Mobile enter about:debug in the address bar. You will then be presented to a screen that asks you to enter an IP address and a port. Once you do this and hit connect the desktop version of Opera will be able to debug your mobile connection. Let me be clear about this: you don’t even need to be in the same city as the desktop version! Yes,  it would be slow to remote debug a device in another city, but it’s possible.

Those are the most useful tools that I have found while working on mobile web development. Got a tool you’d like to suggest?

This post was originally published as Remote Debugging A Mobile Website for The BrandBuilder Company.

Comments are closed.