New Adobe Labs release: Adobe Shadow

Published by | Friday, March 9th, 2012

I love using Adobe BrowserLab. It’s a great way to check how your sites look on different browser platforms. But I’m even more excited about Adobe Shadow, a new Adobe Lab that allows you to test your web sites on mobile devices by creating a dynamically-updating connection between your devices. In layman’s terms, this means that you can visit a web site on your desktop browser and simultaneously preview it on multiple phones and tablets. So, as you browse through different pages on your desktop, the mobile devices also update their screens.

Adobe Shadow working on multiple interfaces

Adobe Shadow in action working on multiple interfaces.

Setting up

Getting everything to work takes a few steps. First, you’ll need to download the Shadow desktop application from Adobe Labs. On a Windows machine, you’ll also need to install Bonjour which allows for auto discovery of devices. The Bonjour installer is included with the Shadow download and it’s already a part of Mac OS, so no need to install it there.

After downloading and installing the Shadow desktop application, you’ll need to download and install the Google Chrome extension for Adobe Shadow. You can download the extension from the Google Chrome Web Store.

Finally, you’ll need to download the Adobe Shadow app for each mobile device you want to use (it’s free!). You can do that from either the Apple App Store or Google Play, but it’s probably easier to just go to your respective device’s store.

 

Connecting to devices

Once you’ve got everything installed, make sure the following is true:

  1. Your Shadow desktop application is running.
  2. Bonjour is installed and running on your machine (automatic on Mac, but an additional install on a PC).
  3. You’re using the Chrome browser and have installed the Adobe Shadow extension.
  4. Your mobile devices and your desktops are in the same network and the network has Internet access.
  5. You are running the Shadow apps in every device you want to test with.

When you first run the Shadow apps on your phones, you’ll see your desktop appear as a device to pair with. At this point, you have to type into your desktop a series of numbers supplied from the Adobe Shadow app.

Adobe Shadow insallation: Entering code

Once your devices are hooked up, any website you browse on your desktop will show up on all of your synced mobile devices. The cool thing about this is that if the site you’re browsing uses media queries to target different devices, your mobile devices will automatically display the correct version on each device.

You can interact with each device as if it were running its own browser, which, essentially, is exactly what’s happening. As soon as you go to a new tab or a page on your desktop, all mobile devices will automatically update. I tested this on a Galaxy IIs, an iPhone, a Galaxy Tab, and an iPad, and it works flawlessly. This is not like the static version of the page you see with BrowserLabs—Adobe Shadow offers a dynamic page you can interact with in real time.

Even better, Adobe Shadow’s desktop client ships with a tool that let’s you inspect the DOM. This inspection works nearly exactly like the WebKit Developer tools, so you can change text, delete elements, modify javascript, css, html, and anything else you want, and the mobile device will update with those changes applied.

 

Shadow Tips

Shadow does create a persistent connection to your device and uses a wireless radio to continuously try to reconnect to your device so Adobe suggests that you use Shadow with a device that is plugged into a charger. Make sure you close or hide the app when you’re not actively using it.

To accomplish some of its magic, Shadow is also using a Phonegap tool called weinre (WEb INspector REmote) that allows you to set up a server for doing some of what the Shadow Lab is doing on a local server. For this reason, inspecting the DOM requires an active Internet connection, and the process can be a bit slower than just browsing through pages because Adobe is temporarily running a copy of weinre on its servers.

 

Interested in more?
• All developer courses on lynda.com
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:
Mobile Web Design & Development Fundamentals
Titanium Mobile App Development Essential Training
Web Site Planning and Wireframing: Hands-On Training
Flex 4.6 and AIR 3.0 New Features for Mobile Apps
Web Form Design Best Practices

Share this:Share on Facebook5Tweet about this on Twitter25Share on Google+0Pin on Pinterest0Share on LinkedIn8

lynda.com - start learning today

Tags:


2 Responses to “New Adobe Labs release: Adobe Shadow”

  1. Kevin says:

    Ray, awesome as usual. You really have a way of conveying a lot of information and complexity in a concise and easy to comprehend presntation style! I’m off to set it up in my dev studio right now!

  2. Hey Kevin…thanks for the awesome encouragement. Adobe Shadow Rocks…they just released an update to their iPad app with a couple of small changes. Added open URL in browser and copy URL to clipboard.

Leave a Reply