We're hiring!

We're actively seeking developers and designers for our Ann Arbor & Detroit locations.

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

Jared Sartin (33 Posts)

Web and mobile developer. Works in Ruby/RoR and JavaScript frameworks.

Strong passion for game development, UI design, and general UX.

This entry was posted in Web Apps and tagged , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

7 Comments

  1. Posted August 3, 2012 at 11:04 pm

    Hi Jared,

    Nice write up on Shadow! I’m glad to see you find it useful.

    In your Adobe Shadow Setup, step 3 – you should be able to use localhost without needing to use your IP address.

    We’re almost ready to share Shadow Labs Release 4, which has some nice refinements and much better Remote Inspection workflows. Keep an eye on the Shadow Team Blog where we’ll make the announcement.

    Bruce Bowman
    Shadow product manager
    @brucebowman
    http://blogs.adobe.com/shadow

    • Jared Sartin
      Posted August 7, 2012 at 10:38 am

      Thanks Bruce! I have updated the article to reflect this.

      Looking forward to all the refinements that are on the way!

  2. Paul
    Posted August 7, 2012 at 12:02 pm

    I’ve been using Shadow for a while now. It’s very useful to inspect items on the iPad.

    However, I still find it glitchy in these areas:

    1) I have to refresh the inspector a lot while using it. Almost every time I make a change, I have to refresh the inspector. Does it have to do with the version of iOS being used maybe?

    2) My machine CPU gets hammered by “Google Chrome Worker” when I use Shadow. Is Shadow causing Chrome to be overworked?

  3. Posted August 7, 2012 at 12:31 pm

    Hi Paul,

    We know about 1) and have a new version that greatly improves the Remote Inspection workflows and connectivity. It’s not your fault, it is ours. Look for a new public version very soon that fixes that.

    About 2), this is news to me. I suspect it is a coincidence that Google Chrome Worker is using a lot of CPU while you’re using Shadow, because the overheard for Shadow is really light. I suggest you launch Chrome with only one tab while you’re using Shadow, and try that for a while. If you still see it using a lot of CPU, then you might be on to something.

    Bruce

    • Paul Hart
      Posted August 7, 2012 at 1:10 pm

      Thanks for the quick reply, Bruce. When you say the latest version, are you talking about the helper, the plugin, the app or all 3?

      As for #2, I only have one or two tabs open when using Shadow. I will keep watching to see if it’s a problem.

      Paul

      • Posted August 11, 2012 at 4:14 pm

        All of the pieces of Shadow should be updated to the latest version.

        If you’re only running with a couple of Tabs open, then it could be another extension misbehaving, or conflicting with Shadow. I suggest you click the “wrench” icon in Chrome, and choose View Background Pages. Then, click the CPU column to sort by the processes that are using the most CPU. Keep that window open to monitor what’s happening in Chrome while you work. When it starts using a lot of CPU, you’ll see the culprit.

        If this continues, please move it to our Shadow Community Forums: http://adobe.com/go/shadow_support, and maybe link the threads between there and here.

        Thanks!
        Bruce

        • Paul
          Posted August 12, 2012 at 10:18 pm

          Thanks for the tip, Bruce. I’ll give it a try next time I use Shadow.