We launched a new IT training category! Check out the 140+ courses now.

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Ray Villalobos | Friday, March 09, 2012

New Adobe Labs release: Adobe Shadow

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 FundamentalsTitanium Mobile App Development Essential TrainingWeb Site Planning and Wireframing: Hands-On TrainingFlex 4.6 and AIR 3.0 New Features for Mobile AppsWeb Form Design Best Practices

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.