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:

  • The Shadow Server – The application will run on your development machine and accept connections from mobile devices. Download Shadow here.
  • The Shadow Browser Control Extension – This extension runs in Chrome and tells the devices to visit the page in the active tab. It can be installed from the Chrome extension store. You can downloaded Chrome from Google if you don’t have a copy.
  • The Shadow Mobile App – The app will run on the devices, allowing you to pair with the server computer and be controlled by it. This will not give full control of the device, but instead gives you the ability to browse to the same page that the computer is visiting.

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