I recently posted about Adobe Shadow a new tool to help mobile web development. Yesterday I downloaded the beta and tested it out. Using Shadow was like a breath of fresh air and helped pinpoint the cause of a real CSS bug with high efficiency, without shadow it would have a been a real stubbon issue. Shadow extends the Chrome developer tool to mobile.

I was very impressed and recommend any website developer who cares about mobile to download it now - it is free.

Using a small set of devices (see photo), some in portrait, some in landscape, Shadow made is very fast to test and debug. Here is how to get started...

  1. Download Adobe Shadow an install on your desktop. (This is the gateway, "helper" app, between your computer and your mobile devices.)
  2. Download the Google Chrome plug in for Adobe Shadow. (This is the UI to the tool)
  3. Install the native Adobe Shadow app for each device, get this from the respective app store, download iPhone, download Android.
  4. With Chrome and the Adobe Shadow helper app open on the desktop, open Shadow on one of the mobile devices. As long as the device is on the same wifi network it should scan and then show your computer.
  5. On the device tap your computer name, the device will show a PIN
  6. Click on the SD Chrome plugin icon and select the device you trying to connect and enter the PIN. Now your device is paired.
  7. Repeat the pairing step (4 & 6) until you have all your devices paired.
  8. Now browse a website. - All the paired devices will load the same webpage.
  9. You can quickly scan the devices and test for errors.

This browse and follow feature is cool, but what if you find a fault? You really want to debug it and find exactly what is happening in the rendering engine for that device. Well you can! To debug on one of the devices...

  1. Open the Chrome plug in (click the SD icon in chrome)
  2. It will show a list of paired, connected devices. For the device you want to debug click the '' icon next to the device name.
  3. The Chrome developer inspection tool will open, give it a few seconds, it will connect to the device.
  4. You can now use the Chrome Developer Tool elements inspector and see the results on the device. This lets you see the classes, the metrics for tags and lets you tweak them in real time. THS IS COOL!

If you have ever chased rendering bugs before on mobile you will apprieciate that the above is fantastic! The inspector does have lag, but that is expected given the remote over the network communication and it is still in beta.

It a real sign that mobile web development is finally mainstream when large companies such as Adobe invest money in developing this kind of tool. Adobe say they support iOS, Android, Blackberry and WinPhone. I could not find the WinPhone app, it may not be live yet. (see comment from Bruce Bowman, no commitment to supporting the latter)