Browser testing across devices with Adobe Shadow

If you've ever built a mobile website, you know that testing and debugging across multiple devices can be cumbersome and, at times, downright painful. Adobe Shadow helps resolve this by giving you the ability to easily control browsing across multiple devices. It then complements this with debugging and inspection tools that enhance your ability to determine the exact causes of any issues. Once you integrate Shadow into your development workflow, you quickly start to see how much Shadow improves that workflow when testing browser-based applications on devices. The more devices you need to test for your web app, the more time and effort Shadow saves you.

This article covers how to set up Shadow on your desktop and your devices and then discusses some of its capabilities as well as some of its current limitations. Keep in mind that Shadow is still in a preview release on Adobe Labs, so limitations are to be expected and many may be resolved by future updates.

One of the most impressive parts of Adobe Shadow, to me, is how quick and easy it is to set up. There are only three steps to the installation:

1. Install Shadow on your computer
2. Install the Chrome Extension
3. Install the Shadow app on your iOS and/or Android devices

Once you have everything installed, follow these steps to get started:

1. Ensure that the Shadow application is open on your computer.
2. Open Shadow on any devices you intend to test.
3. Assuming all devices are on the same network as your desktop, you should see your computer listed under Connections on each device.
4. When you click the connection, you will be given a passcode.
5. Within Chrome on your computer, you'll notice that a plus icon now displays on the Shadow extension (generally this extension is to the right of the address bar). Click on the icon, and type the passcode next to that device's listing (see Figure 1).

You should begin seeing Shadow on your device follow along with whatever you browse on your desktop.

Note: Though it may be obvious, if you are connected to a VPN you may encounter difficulty having Shadow on your device detect your desktop.

After initial pairing, you can open and close Shadow on your computer or device without having to re-enter the passcode.

Testing your pages with Shadow is even easier than the set up. Simply browse using your Chrome browser and all devices that have been connected will follow along. This enables you to test the appearance and behavior of any page on a variety of devices at one time. Plus, Shadow will keep your device from going to sleep, so you no longer need to unlock the device when you want to test the page. You aren't limited to just browsing within a single tab; Shadow will display the content within the current tab as you switch across tabs.

Of course, browsing live web pages is useful but most of the time you will be developing locally. Thankfully, Shadow fully supports browsing on your localhost, letting you test applications as you develop them. Not surprisingly, Shadow cannot load files browsed via file:/// as the file doesn't exist on your devices. As you might expect, if you are browsing password protected pages, you will need to authenticate on each device. Refreshing the page on a specific device uses the common "Pull to Refresh" gesture. Alternatively, you can also click the refresh icon on the Chrome Extension to refresh all connected devices simultaneously.

The Shadow capabilities covered thus far would be useful in and of themselves, but the best feature of Shadow is its debugging capabilities. When you click on the Adobe Shadow icon in Chrome, you'll see a "<>" icon next to each device. Clicking this icon will open the debugging panel that uses weinre under the covers, though it will look familiar to anyone who has used Chrome or Safari's developer tools (see Figure 2).

Once in the debugging panel, you can view and edit the DOM and see those changes reflected on the specific device you are using for debugging. You can even view the console logs. As you probably know, these capabilities are quite powerful when debugging issues in HTML, CSS, and JavaScript.

As of this writing, I did encounter a few limitations in debugging (which I'd argue are to be expected from a preview release of a product such as this). In my tests, the Timeline did not seem to give any data, even when refreshed. The Network tab only works for XHR. Also, while the Console will show items logged once the page has fully loaded (for example, on a button click event), anything that might have been logged to the console on page load doesn't show. As you might expect, you will need to actually trigger this on the device (that is, you'll have to click the button on the device not on your computer) to see the information sent to the Console. While I could edit HTML, CSS, and JavaScript, I couldn't determine how to add a new line (pressing the Enter key or any combination of keys plus the Enter key always just recorded my edits)—there were no Edit As Text or Edit As HTML options as in the Chrome developer tools. Finally, debugging uses a weinre server on adobe.com—and when this service is down for maintenance debugging will not be available.

Despite these limitations, as Ray Camden notes, debugging via Shadow is extremely powerful and I fully expect that future versions will further improve the process.

As of the most recent preview of Adobe Shadow, you can now grab screenshots on any given device or all devices at the same time. To grab a screenshot across all devices, simply open the Shadow extension in Chrome and click on the camera icon. This will transfer image captures from all connected devices back to your computer. Click on the folder icon next to the camera to open the folder containing your screen captures. To capture a single device's screen simply open the action menu on the device and click Screenshot. For example, Figure 3 shows a screenshot of my blog running on a Samsung Nexus S with Ice Cream Sandwich.

As you can see, I clearly need to work on this (though my design skills are famously lacking). Another interesting thing note, the screenshot is the current viewport, so if you've scrolled, or even zoomed in before the screenshot is taken, the saved image will contain the actual viewport contents. In addition to the image, Shadow saves a text file alongside it with useful details such as the URL of the page, as well the page size, operating system, device model, and pixel density. I see this as being very useful for testing teams who need to send a developer notes explaining the exact nature of an issue they are seeing during testing.

If you are building web applications that need to be tested on multiple devices (and, realistically very few of us should be building web apps and not testing on devices nowadays), then there is absolutely no reason I can see why you wouldn't immediately add Shadow to your toolset. It is easy to set up, it is easy to use, and it offers a number of capabilities you likely don't currently have. Most importantly, it will save you time and potential frustration.

If you'd like to learn more about Shadow, Christian Cantrell released a video tutorial covering Shadow. Holly Schinsky also released a detailed tutorial covering inspecting and debugging in Shadow.