7 Comments

Using Adobe Shadow to Test Websites on Mobile Devices

Mobile Site Testing

On both my personal and Atomic projects, I test my work on mobile devices. But testing web apps and websites on mobile devices can be tough. You need to get all the devices on the local network, open their web browser, fat-finger-type the url to your computer, and constantly hit reload on all the devices once you make a change.

In addition, mobile devices lack good developer tools (such as JavaScript consoles and CSS inspectors), and emulating the devices just takes too much work. Fortunately, there’s a nice tool I’ve found to help fix all that: Adobe Shadow.

Adobe Shadow lets me control all my iOS and Android devices at once, allowing me to inspect elements and work with web pages on the fly with each device. Watch a video demonstration from Adobe.

Gathering the Pieces

You need a few pieces of software to get started:

Adobe’s website also has a Shadow Installation Guide. It requires you to have Bonjour installed, which is covered in the guide.

Adobe Shadow Setup

  1. Once all the pieces are installed, open up the server on the development computer. It won’t do much, but it needs to run the entire time you want to connect to devices. Always keep the server running; it’s what tells the mobile devices where to go.
  2. Connect all mobile devices to the wireless network that your computer is on.
  3. Open up Chrome and the mobile applications. Direct Chrome to your app, via your local ip or localhost. Don’t forget to add the port to the URL if the application is not running on port 80.
  4. Pair the devices, and begin browsing in Chrome. All the paired devices will follow along to the same site within a matter of seconds.

For detailed pairing instructions and console interactions, read Adobe Shadow – Inspect/Debug your Mobile Web Content by Holly Schinsky of Adobe Systems.

Troubleshooting Tips

  • If the inspector looks like it’s not working, choose a target from the first page and try again.
  • When you refresh the page in Chrome, you may lose connect with the devices. If this happens, simply close and re-open the inspector. In an upcoming version, you should only have to re-select the target from the first tab of the inspector.
  • If you have a login page in your web app, you’ll need to log into all devices.
  • The software is in beta, so check the site for updates. The mobile apps and Chrome extension should auto-update.

Edit 8/7/12: Step 3 of the setup can connect to localhost too – Thanks Bruce Bowman